chartjs / chartjs/Chart.js

Chart behaves weirdly on large dataset with large canvas width size

Open
#11,557 1 comment 1 reaction 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### 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](https://github.com/chartjs/Chart.js/assets/46742676/a390d132-3482-4a86-bc47-ffa66e66d7b6)

# **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](https://github.com/chartjs/Chart.js/assets/46742676/9d6553e1-6246-482d-9217-9346a45b3700)

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](https://github.com/chartjs/Chart.js/assets/46742676/5b93b3e3-4727-41aa-a4b4-9d7223e67270)

Worked like a charm, until it's not.

![image](https://github.com/chartjs/Chart.js/assets/46742676/48b5907a-fe1c-4ac2-b21b-c2f21f3b91c7)

### 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](https://github.com/chartjs/Chart.js/assets/46742676/086fafcc-0253-4233-8286-67f576708e3e)

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

![image](https://github.com/chartjs/Chart.js/assets/46742676/5310e1ec-8b3a-4df7-8db9-7838b726a87a)

### 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

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.