Bar Chart bars not showing up in Chart.js

September 19, 2022

Currently trying to create a bar chart in HTML/Javascript. Can’t seem to get the bars showing for some reason. Below is the code and image..

Chart shows up but not the actual bars. Guessing this is a data issue but I’ve been stumped for ages. Any help is greatly appreciated!

HTML

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

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    label: ['Red','Blue','Yellow','Green','Purple','Orange'],
    datasets: [{
      label: 'number of votes',
      data: [1,2,3,4,5,6],
      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, 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)'
      ],
      borderWidth: 1
    }]
  },
  options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

>Solution :

You have to use labels instead of label for the bar labels. See the official documentation: LINK

So your JS would look like this (see the change on line 5):

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red','Blue','Yellow','Green','Purple','Orange'],
    datasets: [{
      label: 'number of votes',
      data: [1,2,3,4,5,6],
      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, 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)'
      ],
      borderWidth: 1
    }]
  },
  options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});