angularng2-charts

How to make ng-2 chart scrollable

I'm using ng2-chart for displaying around 500 to 1000 data sets. 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 the parent div and giving width: 100% and overflow-x: scroll to the chart div, but it's not working.

Solution

  • 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