Chart.js bar chart only displaying first value in data array

JavaScript
1

I have created a web page in a html file. I have used the chart.js plugin to display a bar chart. However, only the first value of the array displays in the chart. Here is my index.html.

<!DOCTYPE HTML>

        <html><head>
    <meta charset="utf-8" />
    <title>Hello</title>
    <script src="/Chart.js" type="text/javascript"></script>
</head> 

<body>

      <h1>Battery Levels</h1>
    <div>
        <canvas id="myChart1" width="800" height="450"></canvas>
    </div>
    <script>
        var batlevels = {
            datasets: [{
                data: [20, 40, 10, 30, 50],
                backgroundColor: [
                "#FF6384",
                "#63FF84",
                "#84FF63",
                "#8463FF",
                "#6384FF"
                ]
            }]
        };

        // Get the context of the canvas element we want to select
        var chart1 = document.getElementById("myChart1").getContext("2d");
        new Chart(chart1, {
            type: 'bar',
            data: batlevels
        });
    </script>
</body>

</html>
2

Welcome, marionb.

You need to pass in the labels property of the data object.

Hope this helps.