Chart.js: Horizonal Scroll Chart

[MrKen99]

When i change width of web(like width of mobile), chart.js show chart very small. I want my chart "horizonal scroll". Like this : link here.

[etimberg]

@MrKen99 the best way to do this would be to put the canvas in a fixed size div. Then, have that div inside a container that allows scrolling.

[MrKen99]

Yep, I got it. Thank you , etimberg.

[jibaxx]

@etimberg I'm also building a scrolling chart inside a div, but as soon as the user scroll, the yaxis isn't display anymore. How to keep this axis visible ?

1. Create a canvas beside the chart to redraw the axis. Then how to get the coordinate (y) of the ticks?
2. Add the labels value to the xGridlines. How to do it ?

Im using ChartJs v1.x with angular chartJS (wrapper for ChartJS)

[panzarino]

@jibaxx Unfortunately version 1 is no longer supported, and this could be a problem with the angular wrapper. Please consider upgrading to version 2 and seeing if you can fix the problem then.

[bimal1331]

I use ChartJS 2 and fixed Y-axis is not supported there also. @jibaxx Did you find anything that worked for you? Only thing I can think of to display another Y-axis that is outside the chart and thus won't scroll with the chart, but you'll have to calculate the values yourself.

[panzarino]

You might want to check out the zoom/pan plugin.

[jwds]

@bimal1331 , Did you find any solution for your issue? I am using v2.7.2
zoom/pan plugin is not an option for me. I want scrolling with Y-axis outside constant.

[vbspam]

I would be also interested. The 'chartjs-plugin-zoom' mentioned as possible workaround does not work.
Does anyone successfully deployed chartjs with large datasets (those requiring horizontal scrolling) ?

[EmmaLouS]

Has anybody managed to resolve having a fixed Y-axis while the chart scrolls horizontally?

I have tried this approach with 2.7.2 - https://jsfiddle.net/EmmaLouise/vcbg0jdn/1/ - but unfortunately this breaks on higher DPI settings (still trying to figure out a good workaround for scaling it up with the DPI). I find it hard to believe that the only way to have a fixed axis involves having an animation workaround but that has been all I could find in my research online for 2.x.x versions.

[EmmaLouS]

@bimal1331 @vbspam @jwds I found a solution for a fixed Y axis by using the onComplete and onProgress animation options to draw the Y axis as it scrolls, and also to clear the previous one so there is no overlapping/blurring. I also needed to scale it to match the device's DPR (which Chart.js already handles, hence the problem I was having in my previous post).

See - https://jsfiddle.net/EmmaLouise/eb1aqpx8/3/

[izsoandras]

@EmmaLouS Thanks for the solution, it works great! Although I tried to make it dynamic, but it's not working really well. The chart is updating, but stays in it's wrapper as it wouldn't be scrollable. But the scrollbar is there and I can scroll it, but there is white background. Do you guys have an idea what am I missing?

[ghost]

@izsoandras share your example! I am trying to get @EmmaLouS working with the y-axis on the right.

[Githamza]

https://github.com/chartjs/Chart.js/issues/6793

[lehien]

But it still can't be scrolled and reponsive together. When you change window size, the chart not fit screen.