Change x-axis labels and add custom date range to filter data

[asmsaiff]

Hello folks,

See the image bellow -

I want to change the x-axis labels like when someone filter out by week then x-axis labels will change by week day name like SAT SUN MON TUE... etc, when filter by month then the x-axis labels will show past 30/31 days like 1 2 3 4 5 6 7 8 ... 31, and when filter by year then x-axis labels will change by month name like JAN FEB MAR APR MAY JUN JUL........ DEC as well.

And also there will be a custom date changer field when user choose range of date then the chart will filter data according to the date range they choose.

How can I do that ?? Also It'll be good if there available any ready plugin or ready GIST available in Github.

Thanks

[kurkle]

Either write a lot of code to handle the labels, or use time scale.

Here's an examples using time scale + zoom plugin (not a bar chart though):
https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/wheel/time.html

[asmsaiff]

Thank you for your suggestion @kurkle I must try this. But can you give us some idea how can I customize that in chart.js with custom code?