Chartjs-Charts.js Pie Chart

by

1👍

✅

Check out the inspector. You’ll see you are throwing an error on line 293 of charts-chartjs.js.

[Error] TypeError: null is not an object (evaluating 'document.getElementById("bar-chartjs").getContext')

The code for your pie chart comes after this, so the pie chart code isn’t ran.

Edit – Add code for checking if element exists.
getElementById returns null if the element doesn’t exist. So, you can wrap your creation of the chart in a simple if statement:

var bar = document.getElementById("bar-chartjs");
var ctxBar;
if (bar) {
    ctxBar = bar.getContext("2d");
    myBar = new Chart(ctxBar).Bar(barChartData, {
        responsive : true,
        scaleShowGridLines : true,
        scaleGridLineColor : "#bfbfbf",
        scaleGridLineWidth : 0.2,
        //bar options
        barShowStroke : true,
        barStrokeWidth : 2,
        barValueSpacing : 5,
        barDatasetSpacing : 2,
        //animations
        animation: true,
        animationSteps: 60,
        animationEasing: "easeOutQuart",
        //scale
        showScale: true,
        scaleFontFamily: "'Roboto'",
        scaleFontSize: 13,
        scaleFontStyle: "normal",
        scaleFontColor: "#333",
        scaleBeginAtZero : true,
        //tooltips
        showTooltips: true,
        tooltipFillColor: "#344154",
        tooltipFontFamily: "'Roboto'",
        tooltipFontSize: 13,
        tooltipFontColor: "#fff",
        tooltipYPadding: 8,
        tooltipXPadding: 10,
        tooltipCornerRadius: 2,
        tooltipTitleFontFamily: "'Roboto'",
    });
}

Leave a comment