ChartJS：具有多个数据集的水平条不显示条

Question

I have Horizontal Bar comparing Rooms & Guests target vs achieved. Rooms has 3 data values (Available, Budget, Actual) and Guests has only 2 (Budget, Actual).

Below is the code generates the chart:

 data = [{
        label: 'Available',
        backgroundColor: '#3366ff',
        data: [5580]
    }, {
        label: 'Budget',
        backgroundColor: '#009999',
        data: [5000, 6500]
    }, {
        label: 'Actual',
        backgroundColor: '#92d400',
        data: [5200, 7245]
    }];

 var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["Rooms", "Guests"],
        datasets: data
    }
}

Issue with the above code is, Rooms Budget bar is not showing up.

It shows only when I add [5580,0] to the Guests Available data value; however there is no such Data for Guests like Rooms.

Here is the JSFiddle ( https://jsfiddle.net/kingBethal/vtf17k84/8/ ).

Answer 1

5000 is the lowest value in your dataset and Chart.js is creating its scale starting at 5000:

Set the beginAtZero property to true and you'll see the expected bar:

 let data = [{ label: 'Available', backgroundColor: '#3366ff', data: [5580] }, { label: 'Budget', backgroundColor: '#009999', data: [5000, 6500] }, { label: 'Actual', backgroundColor: '#92d400', data: [5200, 7245] }]; let myChart = new Chart(document.getElementById('chart'), { type: 'horizontalBar', data: { labels: ["Rooms", "Guests"], datasets: data }, options: { scales: { xAxes: [{ ticks: { beginAtZero: true } }] } } });

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <canvas id="chart"></canvas>