Chartjs-Bar Chart not displaying when using chart.js

by

2👍

✅

The issue solely lies in your barchart.txt , Obviously, that’s not a valid JSON object. A proper JSON object would look something like, {"key": "string"} , you can refer here to learn more about JSON.

also, you should probably change your barchart file’s extension from .txt to .json

so, the data inside your barchart.json file should look like this …

{
    "labels": ["January", "February", "March", "April", "May", "June", "July"],
    "datasets": [{
        "label": "Dataset Testing",
        "backgroundColor": [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
        ],
        "borderColor": [
            "rgba(255,99,132,1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
        ],
        "borderWidth": 1,
        "data": [65, 59, 80, 81, 56, 55, 40]
    }]
}

1👍

Your json is not valid. You can validate it here http://jsonlint.com/

{
"labels": [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July"
],
"datasets": [
    {
        "label": "Dataset Testing",
        "backgroundColor": [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
        ],
        "borderColor": [
            "rgba(255,99,132,1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
        ],
        "borderWidth": 1,
        "data": [
            65,
            59,
            80,
            81,
            56,
            55,
            40
        ]
    }
]}

Try with the above json

Leave a comment