Chart.js multiple datasets on one y axis

Question

I am using chartjs v3 (latest) and I'm trying to render a graph with multiple datasets that share one y axis.

Currently I have the following code:

const buff = await defaultChartRenderer({
                    type: 'line',
                    data: {
                        labels: data.value.filter(v => v.type === 'online').map(v => moment(new Date(v._time)).format(data.format)),
                        datasets: [
                            {
                                data: allOnline,
                                borderColor: '#43b581',
                                backgroundColor: 'rgba(0,0,0,0)',
                                label: 'Online',
                                normalized: true
                            },
                            {
                                data: allOffline,
                                borderColor: '#ff0000',
                                backgroundColor: 'rgba(0,0,0,0)',
                                label: 'Offline',
                                normalized: true
                            },
                            {
                                data: allIdle,
                                borderColor: '#faa61a',
                                backgroundColor: 'rgba(0,0,0,0)',
                                label: 'Idle',
                                normalized: true
                            },
                            {
                                data: allDnd,
                                borderColor: '#f04747',
                                backgroundColor: 'rgba(0,0,0,0)',
                                label: 'DND',
                                normalized: true
                            }
                        ]
                    },

                    options: {
                        scales: {
                            y: {
                                suggestedMax: Math.max(...[...allOffline, ...allOnline, ...allDnd, ...allIdle]),
                                suggestedMin: Math.min(...[...allOffline, ...allOnline, ...allDnd, ...allIdle]),
                                stacked: true,

                                ticks: {
                                    beginAtZero: false,
                                    precision: 0,
                                },
                                gridLines: {
                                    zeroLineColor: "rgba(255, 255, 255, 0.8)",
                                    color: "rgba(255, 255, 255, 0.4)"
                                },
                                stacked: true,
                                id: 0,
                                position: 'left'
                            },
                        },
                        legend: {
                            //display: false,
                            labels: {
                                fontColor: 'white',
                                fontSize: 20
                            }
                        },
                        tooltips: {
                            enabled: false
                        }
                    }
                })

The defaultChartRenderer function does not modify my input at all. The following data gets passed in as allOnline, allOffline, allIdle, and allDnd:

[
  2, 2, 3, 3,
  3, 2, 2
] [
  4, 4, 4, 3,
  4, 4, 3
] [
  1, 1, 1, 1,
  0, 0, 1
] [
  1.5, 1, 2, 2,
    2, 2, 2
]

I would expect this to output a graph with that data, but instead only the allOnline data shows properly. Everything else gets moved upwards.

Current Output: https://i.stack.imgur.com/ybHMJ.jpg

Am I doing something wrong? I've tried adding yAxisID to all of the datasets and sharing one id between all of them, but that didn't work. I've also tried without normalize: true.

Answer 1

To make it work as expected, remove the option scales.y.stacked or set it to false.

For further information, please consult the chapter Stacking from the Chart.js documentation.

UPDATE

stacked: true is defined twice on your y-axis. Remove both of them, and it should work.