Chartjs-Charts Js Stacked Bar Graph displays no values?

by

1👍

✅

I put the above together into one file and it works (although I had to change "Overall" to "Severity" in the call). So I’d expect that something you are using might not match your example above.

The version I used:

<html>
<body>
    <canvas id="overall"></canvas>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script>
    var Severity = {
        "3M": [0, 3, 1, 0, 0],
        "5T": [0, 0, 1, 0, 0],
        "6S": [0, 0, 2, 0, 0]
    };
</script>
<script>
    function StackedBar(id, Severity) {

        var label = Object.keys(Severity); // getting the labels

        var Critical = [];
        var High = [];
        var Medium = [];
        var Low = [];
        var Others = [];


        for (let i = 0; i < label.length; i++) {    //assigning the data to arrays created
            Critical.push(Severity[label[i]][0]);
            High.push(Severity[label[i]][1]);
            Medium.push(Severity[label[i]][2]);
            Low.push(Severity[label[i]][3]);
            Others.push(Severity[label[i]][4]);
        }

        var ctxL = document.getElementById(id).getContext('2d');   //id from the html canvas
        var chart = new Chart(ctxL, {
            type: 'bar',
            data: {
                labels: label,
                datasets: [
                    {
                        label: 'Critical',
                        data: Critical,
                        backgroundColor: '#aa000e'
                    },
                    {
                        label: 'High',
                        data: High,
                        backgroundColor: '#e65905'
                    },
                    {
                        label: 'Medium',
                        data: Medium,
                        backgroundColor: '#e00ce6'
                    },
                    {
                        label: 'Low',
                        data: Low,
                        backgroundColor: '#b8ab16'
                    },
                    {
                        label: 'Others',
                        data: Others,
                        backgroundColor: '#00aaaa'
                    }
                ]
            },
            options: {
                responsive: true,
                legend: {
                    position: 'right'
                },
                scales: {
                    xAxes: [{
                        stacked: true
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                }
            }
        });
    }
</script>
<script>StackedBar('overall', Severity);</script>

</html>

Leave a comment