chartjs / chartjs/Chart.js

Chart fill mode 'stack' - negative values

Open
#10,205 3 comments 0 reactions 0 assignees View on GitHub
type: bug type: enhancement
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### Expected behavior

When using fill mode stack (`fill: 'stack'`) I expect:
- All lines to be stacked on top of each other, even if some data points or data sets are negative
- Areas under lines to be stacked, even if some data points or data sets are negative
- Stacks to have the area end at `'origin'` - or at least an option to enable it

### Current behavior
Currently the top of the stacks does not represent the sum of the values, if some dataset values are negative. The areas under the datasets look strange. There is no (?) Option to have stacking *and* have the area under the lines end at origin.

image

**Figure 1: Stacking of total values, sum of these data points should be 20. The peak of the stacked values end up at 25.**
\
\
\
\
image
**Figure 2: Stacking with tooltip info**

### Reproducible sample

https://jsbin.com/tayareqige/1/edit?html,output

### Optional extra steps/info to reproduce

_No response_

### Possible solution

- Add new fill modes, e.g. `fill: {stack: 'origin'}`, `fill: {stack: 'start'}`, `fill: 'stack-origin'`
- Change existing fill mode "stack"

image

**Figure 3: Montage of an example solution, where the constant-value green dataset is stacked on top of the negative red dataset, and where the pink and red datasets cancel out -- having the total/sum stay the same thoughout. The red dataset has no area.**

### Context

I am trying to have negative values in a stacked area chart, having one negative and one positive data set cancel out.

### chart.js version

v3.7.1

### Browser name and version

Safari

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