chartjs / chartjs/Chart.js

When using Chart.js to display data in a bar chart, there is an issue with overlapping data, especially when the datasets array contains a large number of objects. Some bars are rendered incorrectly, overlapping each other. When the dataset becomes even larger (e.g., several thousand objects), the plugin stops rendering the chart entirely, showing only an empty space or a placeholder square.

Open
#12,000 1 comment 0 reactions 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

Each bar should be displayed separately, without overlapping other bars, even with a large amount of data.

The X-axis should correctly display labels, and the data should be visualized without distortion.

For very large datasets, the chart should either render correctly or provide a warning about exceeding limits, rather than failing silently.

### Current behavior

With a moderate amount of data (e.g., a few hundred objects), bars overlap each other, making the chart unreadable.
![image](https://github.com/user-attachments/assets/7adf6482-cdfa-4c10-ab41-e3b623fa5498)

With a large amount of data (e.g., several thousand objects), the chart stops rendering entirely. Instead, an empty space or a placeholder square is displayed, as if something went wrong.

### Reproducible sample

https://codesandbox.io/p/sandbox/chartjs-issue-forked-77v3w2

### Optional extra steps/info to reproduce

_No response_

### Possible solution

_No response_

### Context

_No response_

### chart.js version

^4.4.6

### Browser name and version

Google Chrome 131.0.6778.265

### Link to your project

_No response_

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.