Chartjs-Chart of chart.js can't display In Edge and Firefox

by

0👍

✅

Your scales were throwing the canvas off. It seems like the Axes in the scales object appears to be the issue. Instead of making Moment.js figure out that 01 is Jan and so on, I added a labels object.

Also, notice that I have used the same logic as config in the constructor of the chart, but I have broken down distinct pieces of configuration in separate variables. It’s easy to troubleshoot that way.

Give this a shot. It works on Edge, Firefox, IE11 and Chrome.

<!doctype html>
<html>
<head>
    <title>Bar Chart</title>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
<div style="width:75%;">
    <canvas id="canvas"></canvas>
</div>

<script>
var barChartData =  {
    labels: ['January', 'February', 'March', 'April'],
    datasets: [{
        label: "Year: 2019 " ,
        borderColor: 'blue',
        backgroundColor: 'blue',
        borderWidth: 1,
        data: [
            { x: "1", y: 100 },
            { x: "2", y: 175 },
            { x: "3", y: 178 },
            { x: "4", y: 300 }
        ]
    }, {
        label: "Year: 2020 "  ,
        borderColor: 'green',
        backgroundColor: 'green',
        borderWidth: 1,
        data: [
            { x: "1", y: 120 },
             { x: "2", y: 145 },
             { x: "3", y: 158 },
             { x: "4", y: 200 }
        ]
    }]
};

var barChartScales = {
    yAxes: [{
        scaleLabel: {
            display:     true,
            labelString: 'Consumption'
        },
        ticks: {
           beginAtZero : true
        }
    }]
}

var config = {
    type: 'bar',
    data: barChartData,
    options: {
        responsive: true,
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: 'Comparsion of 2 periods'
        },
        scales: barChartScales
    }
}

window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    window.myBar = new Chart(ctx, config);
};
</script>

</body>

</html>

Leave a comment