chartjs / chartjs/Chart.js

Stacked Bar Chart with Groups wrong order when hiding the first dataset by clicking on the legend

Open
#11,978 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

stack bar order stays the same

### Current behavior

stack bar order is changed

### Reproducible sample

I used the 'Stacked group bar' demo to reproduce this:

### Optional extra steps/info to reproduce

- go to https://www.chartjs.org/docs/latest/samples/bar/stacked-groups.html
- replace setup with this:
```
const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};

const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [
{
label: 'Comp 1',
data: Utils.numbers(NUMBER_CFG),
backgroundColor: Utils.CHART_COLORS.red,
stack: 'Stack 0',
},
{
label: 'Data 1',
data: Utils.numbers(NUMBER_CFG),
backgroundColor: Utils.CHART_COLORS.blue,
stack: 'Stack 1',
},
{
label: 'Comp 2',
data: Utils.numbers(NUMBER_CFG),
backgroundColor: Utils.CHART_COLORS.green,
stack: 'Stack 0',
},
{
label: 'Data 2',
data: Utils.numbers(NUMBER_CFG),
backgroundColor: Utils.CHART_COLORS.black,
stack: 'Stack 1',
}
]
};
```
- as you can see the 'Comp x' (stack 0) should be on the left side of 'Data x' (stack 1).
- now hide Comp 1 by clicking on the legend 'Comp 1'
- Weird things happen: now stack 1 is on the left side of stack 0

### Possible solution

_No response_

### Context

Question:
- how to keep stack 0 always on the left side
- or this there a way to order the 'stacks'

### chart.js version

v4.4.3

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