Chartjs-Chart.Js- y-axis line is misplaced on line chart

by

0👍

✅

I solved this issue by giving stack IDs to my bars which I want them to get stacked in y-axis(don’t give IDs to line charts which I don’t want them to get stacked) and removing " yAxes: [{ stacked: true }] " from my options. Here is the codes:

    const barData = {
                labels: lblList,
                datasets: [

                {
                    label: '',
                    backgroundColor: color,
                    type: 'line',
                    borderDash: [10],
                    data: lList,
                    fill: false,
                    borderWidth: 2,
                    borderColor: color,
                    spanGaps: true,
                    fullWidth: false
                },
                {
                    label: 'GP Hedef',
                    backgroundColor: 'rgb(12,0,0)',
                    type: 'line',
                    borderDash: [10],
                    data: mList,
                    fill: false,
                    borderWidth: 2,
                    borderColor: 'rgb(12,0,0)',
                    spanGaps: true,
                    fullWidth: false
                },

                {
                    label: 'MOM Hedef',
                    backgroundColor: 'rgba(122, 17, 17, 1)',
                    type: 'line',
                    borderDash: [10],
                    data: hList,
                    fill: false,
                    borderWidth: 2,
                    borderColor: 'rgba(122, 17, 17, 1)',
                    spanGaps: true,
                    fullWidth: false
                },

                {
                    categoryPercentage:0.2, 
                    data: gList,
                    backgroundColor: cGList,
                    maxBarThickness: 12,
                    borderWidth: 1,
                    label: 'GP',
                    stack: 'stack 1'
                },

                {
                    label: 'Process',
                    data: pList,
                    backgroundColor: cPList,
                    borderWidth: 1,
                    maxBarThickness: 25,
                    stack:'stack 2'
                },

                {

                    label: 'Waiting',
                    data: wList,
                    backgroundColor: cWList,
                    borderWidth: 1,
                    maxBarThickness: 25,
                    stack:'stack 2'

                },

                {
                    data: tList 
                }
                ]}

            new Chart(ctx0, {

                type: 'bar',
                data: barData,
                options: {

                    tooltips: {
                        displayColors: false,
                        backgroundColor: 'rgb(150, 50, 0)',
                        titleFontColor: 'rgb(255, 255, 255)',
                        bodyFontColor: 'rgb(255, 255, 255)',
                        callbacks: {
                            title: function (tooltipItem, data) {
                                return;
                            },
                            label: function (tooltipItem, data) {
                                const label = data.datasets[tooltipItem.datasetIndex].label;
                                const cycle = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                                return label + ': ' + cycle + ' sn';
                            }
                        }
                    },
                    legend: {
                        display: false
                    },
                    title: {
                        display: true,
                        text: 'İstasyon Çevrim Süreleri',
                        fontSize: 20
                    },
                    scales: {
                        xAxes: [{
                            stacked: true
                        }]
                        //yAxes: [{
                        //    stacked: true
                        //}]
                    }
                }
            });

0👍

This happens because you stack your Y axes, so the data is stacked on top of the other data and thus gets added as you noted. To get the behaviour you want you need to remove this part of your config:

yAxes: [{ stacked: true }]

Leave a comment