1

I am using ng2-charts to load bar charts with data from API response. Because this API uses filters, API sometimes gives 5 records and sometimes 50 records in the data array.

Graph loads fine for 10-15 data, on full-screen mode but when there are more records, the graph is congested and barely readable.

I was looking for a way to make it scrollable with constant width of bars all the time.

Here's the implementation: https://stackblitz.com/edit/ng2-charts-bar-template-r8mmuo

I tried this approach which didn't helped on my case.

Luzan Baral
  • 3,678
  • 5
  • 37
  • 68

1 Answers1

0

You can make use of the chart.js zoom plugin: https://www.chartjs.org/chartjs-plugin-zoom/.

Keep in mind that if you are using chart.js version 2 you have to use version 0.7.7 of the plugins since later versions are for chart.js version 3

Sample of dragging using the plugin: https://www.chartjs.org/chartjs-plugin-zoom/samples/pan-region.html

LeeLenalee
  • 27,463
  • 6
  • 45
  • 69