0

I'm using ng2-chart for displaying around 500 to 1000 datas. the problem is I need to fix the with of the chart, is there any way we can make ng-2 chart scrollable?

I tried wrapping the chart inside parent div and giving width as 100% and overflow-x: scroll to chart div, but it's not working

Shashank
  • 437
  • 2
  • 6
  • 21

1 Answers1

1

You can make a ng2-charts' <canvas baseChart> element scrollable by double wrapping it.

Sample HTML :

<div class="myChartWrapper">
  <div class="myChart">
    <canvas baseChart 
      [datasets]="barChartData"
      [labels]="barChartLabels"
      [options]="barChartOptions"
      [plugins]="barChartPlugins"
      [legend]="barChartLegend"
      [chartType]="barChartType">
    </canvas>
  </div>

</div>

Sample CSS:

.myChart{
  height: 500px;
  width: 1000px;
}

.myChartWrapper{
  width: 500px;
  overflow-x: scroll;
}

The inner wrap <div class="myChart"> defines the actual width of the chart. The outer wrap <div class="myChartWrapper"> defines a wrapper's width that you want to actually present to users.

Stackblitz Example

Hope this helps!

terahertz
  • 2,915
  • 1
  • 21
  • 33
  • Thanks, that's exactly what I wanted. 1 more thing I would like to know, it's adding a scroll, but the height of the chart is increasing as we increase the width. Is there any ways we can fix the height irrespective of the width of the chart? – Shashank Oct 30 '19 at 03:53
  • Yes, just set the `maintainAspectRatio` option to false, see this answer: [set height of chart in chart.js](https://stackoverflow.com/a/43658507/2466342) – terahertz Oct 30 '19 at 04:24