search

chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
64.85k stars 11.93k forks source link

Chart behaves weirdly on large dataset with large canvas width size #11557

Open LiquidRekto opened 1 year ago

LiquidRekto commented 1 year ago

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

AjubaNet commented 5 months ago

Ran into this recently. Apparently, canvas element has maximum size limits.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas Canvas Size Test Results