chartjs / chartjs/Chart.js

Area Charts blank lines/zones glitch when using fill and tension

Open
#12,147 0 comments 2 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

The area chart should be rendered without blank lines or blank zones flickering in the background which fills the chart itself.

### Current behavior

When using a value different from `false` for `fill` option, and a value different from `0` for `tension` option, blank lines or blank zones appear in proximity of the left side of the chart, and they flicker when the animation is in progress.
EDIT: sometimes, it even happens in proximity of the right side of the chart.

Below you can see the chart of the provided CodePen which reproduces the glitch, but everytime you reload the page the glitch happens in a new way, but sometimes the glitch doesn't occur. This is very very odd!

**Tested on Chrome and Edge. This glitch doesn't affect Firefox, and probably other browsers.**

Image

### Reproducible sample

https://codepen.io/frazard99/pen/VYeJxaJ

### Optional extra steps/info to reproduce

You can reproduce this glitch even in the sample page of the [Area Chart (Line Chart Boundaries)](https://www.chartjs.org/docs/latest/samples/area/line-boundaries.html), adding `tension: x`, where `x` > 0 and `fill: true` to the `Data` tab, and pressing the button `Randomize` to view the glitch in action, when the animation finishes.

For convenience, here is the full code for the `Data` tab, using tension: 0.4:

```javascript
const data = {
labels: generateLabels(),
datasets: [
{
label: 'Dataset',
data: generateData(),
borderColor: Utils.CHART_COLORS.red,
backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red),
tension: 0.4,
fill: true
}
]
};
```

### Possible solution

_No response_

### Context

_No response_

### chart.js version

4.5.1

### Browser name and version

Google Chrome 142.0.7444.135 (64 bit), Microsoft Edge 142.0.3595.65 (64 bit), OS: Windows 10, 22H2 (build 19045.6332)

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