chartjs / chartjs/Chart.js

spanGaps not working near min and max limits

Open
#11,934 0 comments 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

I show a line chart based on a dataset with a few `null` values.
```
labels: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
datasets: [{
label: '# of Votes',
data: [3, null, 2, 3, 2, 3, 5, 4, 3, null, 5],
spanGaps: true,
tension: 0.4
}]
```
Skjermbilde 2024-10-18 kl  15 34 35

I set a min and max limit for the `x` axis near the `null` values.
```
scales: {
x: {
type: 'linear',
min: 11,
max: 90,
}
}
```
Skjermbilde 2024-10-18 kl  15 18 59

I expect the gaps to be spanned in the same way with or without the x scale limits.

### Current behavior

Gaps are not spanned near min and max limits.
Skjermbilde 2024-10-18 kl  15 23 11

### Reproducible sample

https://codepen.io/marisst/pen/GRVEyGK

### Optional extra steps/info to reproduce

_No response_

### Possible solution

_No response_

### Context

This issue is very painful when creating zoomable and pannable charts with `chartjs-plugin-zoom` because the whole plug-in relies on scale min and max limits. However, the issue is not in the plugin itself, but in the core chart.js library.

https://github.com/user-attachments/assets/34c877a4-bd23-48d9-ba3d-231f0cd7c0ce

### chart.js version

v4.4.5

### Browser name and version

_No response_

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