Chartjs-White Space in stacked bar using chart.js

by

4👍

✅

You have both xAxes and yAxes set to stacked:true.

Commenting out stacked:true on the yAxes will do the trick; 

function newDate(days) {
    return moment().add(days, 'd').toDate();
}

const lineData = {
    labels: null,
    datasets: [{
            label: 'A',
            fill: false,
            backgroundColor: "hsl(50, 50%, 80%)",
            data: [{
                    x: newDate(1),
                    y: 12
                },
                {
                    x: newDate(2),
                    y: 15
                },
            ],
        },
        {
            label: 'B',
            fill: false,
            backgroundColor: "hsl(250, 50%, 80%)",
            data: [{
                    x: newDate(0),
                    y: 23
                },
                {
                    x: newDate(2),
                    y: 34
                },
                {
                    x: newDate(3),
                    y: 45
                },
            ]
        }
    ],
}

const lineOptions = {
    type: 'bar',
    data: lineData,
    options: {
        title: {
            display: true,
            text: 'STACKED TRUE'
        },
        legend: {
            display: true,
        },
        hover: {
            mode: 'nearest'
        },
        fill: false,
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
                display: true,
                ticks: {
                    beginAtZero: false,
                },
                scaleLabel: {
                    display: true,
                    labelString: "Day",
                },
                barThickness: 15,
                type: 'time',
                distribution: 'linear',
                bounds: 'ticks',
                time: {
                    unit: 'day',
                    unitStepSize: 1,
                    displayFormats: {
                        'day': 'DD/MM',
                    },
                    tooltipFormat: 'DD/MM',
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                },
                display: true,
                // stacked: true,
                scaleLabel: {
                    display: true,
                    labelString: "Items",
                }
            }]
        },
        tooltips: {
            mode: 'x',
        },
    }
}
const chart = new Chart(document.getElementById("chart").getContext("2d"), lineOptions);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

<body>
    <canvas id="chart" width="600" height="400"></canvas>
</body>

Alternatively, since setting yAxes stacked:true should be intended, data can be updated such that there exists data for A and B, even if one of them is 0. https://jsfiddle.net/zqrp0w76/2/

Leave a comment