Chartjs-How to add unused data background to bar in chart js

by

0👍

Since I don’t know about your data, I have prepared a custom data. Look carefully that I have taken all the data 95 in the second dataset because the highest value of the first dataset is 95. I think you can solve this in this way.

var ctx = document.getElementById('myChart').getContext("2d");

ctx.canvas.width = 300;

ctx.canvas.height = 200;

var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["A", "B", "C", "D", "E"],
        datasets: [{
            backgroundColor: 'rgb(54, 195, 110)',
            borderColor: 'rgba(255, 255, 255, 0.5)',
            borderWidth: 0,
            data: [95, 75, 80, 55, 85]
        }, {
            backgroundColor: '#948E8D',
            borderColor: 'rgba(255, 255, 255, 0.5)',
            borderWidth: 0,
            data: [95, 95, 95, 95, 95]
        }],

    },
    options: {
        cornerRadius: 30,
        maintainAspectRatio: false,
        legend: {
            display: false
        },
        scales: {
            xAxes: [{
                barPercentage: 0.55,
                categoryPercentage: 0.42,
                gridLines: {
                    display: false,
                },
                stacked: true
            }],
            yAxes: [{
                ticks: {
                    min: 0,
                    max: 95,
                    stepSize: 10,
                    callback: function (value, index, values) {
                        return value + "%";
                    },
                    fontColor: '#999999',
                    fontSize: 11,
                    padding: 15,
                    fontFamily: 'GothamPro'
                },
                stacked: true
            }],
        }
    }
});
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" type="text/javascript"></script>
</head>

<body>

    <canvas id="myChart"></canvas>

</body>

</html>

Leave a comment