Chartjs-ChartJs bar not showing up

by

0👍

step 1-
download chart js

npm install chart.js

step 2
copy chart.min.js from
node_modules/chartjs/dist
to where you want it then

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="chart.min.js"></script>

</head>
<body>
    <canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            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
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>

</body>
</html>

0👍

What I assume might be happening is that the first time when you initialise the chart it doesn’t have any data or labels but the second time you call the method it adds the data but it does not have anywhere to map to since it does not have any labels.

So in your if statement where you update the data you also need to call:

barChartProjekt.labels = newLabelsArray;

And after that you call the update method.

On a side note, the reason your legend isn’t hidden and there is no title displayed is because the namespaces of those have changed in V3, you need to configure them in options.plugins.legend and options.plugins.title instead of options.legend and options.title

Leave a comment