Chartjs-How to create Stacked Line Chart in chartjs Multiple Y Axis and common X Axis

by

1👍

✅

That’s the role of stackWeight (see the docs). The length of each axis in the same stack is proportional to its stackWeight.

So, if axis y2 should have twice the length of y and y3 (those two being equal) you should set stackWeight: 2 for y2 and stackWeight: 1 for the other two.

Here’s a minimal example:

const x = Array.from({length: 101}, (_, i)=>({x: i/100}));
const data = {
    datasets: [
        {
            data: x.map(({x})=>({x, y: Math.exp(x+1)})),
            borderColor: 'red',
        },
        {
            data: x.map(({x})=>({x, y: Math.exp(-x+1)})),
            borderColor: 'blue',
            yAxisID: 'y2',
        },
        {
            data: x.map(({x})=>({x, y: Math.sin(x+1)})),
            borderColor: 'green',
            yAxisID: 'y3',
        }
    ]
};
const config = {
    type: 'line',
    data: data,
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false,
            },
        },

        scales: {
            x: {
                type: 'linear',
            },
            y: {
                stack: 'demo',
                offset: true,
                stackWeight: 1,
            },
            y2: {
                stack: 'demo',
                stackWeight: 2,
                offset: true,
                border: {
                    color: 'black',
                    width: 2
                }
            },
            y3: {
                stack: 'demo',
                offset: true,
                stackWeight: 1
            }
        }
    },
};
new Chart(document.querySelector('#chart1'), config);
<canvas id="chart1" style="height:600px"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.umd.js" integrity="sha512-CMF3tQtjOoOJoOKlsS7/2loJlkyctwzSoDK/S40iAB+MqWSaf50uObGQSk5Ny/gfRhRCjNLvoxuCvdnERU4WGg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Leave a comment