Chart.js icon indicating copy to clipboard operation
Chart.js copied to clipboard

Chart behaves weirdly on large dataset with large canvas width size

Open LiquidRekto opened this issue 1 year ago • 1 comments

Expected behavior

The chart should fully render all 744 columns perfectly with canvas width equals to 774*50 pixels.

Current behavior

The chart stops rendering normally at column 656, and the remaining columns after that all have data concentrated to column 656. Actually, if you tweak it to 774*45 (via cvs.width), the graph will still behave like what I mentioned before (not the case for 774*44, though).

image

UPDATE: Some how Chart.js version 2.9.4 didn't have such issue, but starting from 3.0.0, this issue arises and it seems that this hasn't been fixed till now

Please change the src to https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js in my provided CodePen link to see for yourselves.

Reproducible sample

https://codepen.io/Dng-B-i-Tin/pen/GRzpPYo

Optional extra steps/info to reproduce

Just keep scrolling to the right :>

Possible solution

No response

Context

It's starts with the idea that I want to show the chart with enormous dataset (around 700-ish). Of course what I achieve is what supposed to be a "scatter-plot", and it can be hurtful to watch.

image

So I decided to increase the width of the canvas to widen the chart, and yes, I also limit the display length and enable overflow-x for it

image

Worked like a charm, until it's not.

image

Decreasing the canvas width is the only way for me to keep the chart being stable, and that thing limits me to display charts with "wide-enough" column-width for gigantic dataset. Suppose 744 columns, each with 75 pixels-wide, the canvas width would be 74400 (not counting axes and labels), for the case of bar-charts, this will be aesthetically pleasing and clearer for analytics - you can see every column is being shown below. (Performance can be negligible)

image

...and yes, can't forget to capture this:

image

chart.js version

v4.4.0

Browser name and version

Google Chrome 118.0.5993.90

Link to your project

My project can't be publicized, sorry. But mine uses Vue 3 with TypeScript, created via Vite packager

LiquidRekto avatar Oct 27 '23 08:10 LiquidRekto