Chartjs-Chart JS showing empty chart without any data

by

1👍

✅

Look up the latest Chart JS seems like the old verions do not support it. It worked fine for me with the latest version

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<body>

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

<script>
    var default_data = [
        {
            "year":"Total",
            "gnis_id":"1009494",
            "geometry":"MULTIPOLYGON",
            "metadata":"NA",
            "number_of_records":1,
            "parkname":"NA",
            "region":"NT",
            "state":"NC",
            "unit_code":"BLRI",
            "unit_name":"Blue Ridge Parkway",
            "unit_type":"Parkway",
            "visitors":871922828},
        {
            "year":"Total",
            "gnis_id":"255952",
            "geometry":"MULTIPOLYGON",
            "metadata":"http://nrdata.nps.gov/programs/Lands/GOGA_metadata.xml",
            "number_of_records":1,
            "parkname":"Golden Gate",
            "region":"PW",
            "state":"CA",
            "unit_code":"GOGA",
            "unit_name":"Golden Gate National Recreation Area",
            "unit_type":"National Recreation Area",
            "visitors":611031225
        }
    ];

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

    var chart2 = new Chart(ctx, {
        type: 'bar',
        data: {
            datasets: [{
                data: default_data,
                backgroundColor:["red","green"],
                parsing: {
                    xAxisKey: 'unit_name',
                    yAxisKey: 'visitors'
                }
            }]
        },
        options: {
          plugins:{
            legend: {display: false}
          }
        }
    });
    
   
</script>

Leave a comment