Chartjs-Chart js bar chart not displaying array

0👍

You need to add a labels property on the outer data object. This corresponds to each data point in each dataset. For example, 28 maps to “Red” and so on.

You can see Creating a Chart for a better example

var myBarChart = new Chart(histChart, {
  type: "bar",
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: "Favorite Color",
      data: [28, 6, 2, 4, 2, 2]
    }]
  }
});
body {
  margin: 0;
  padding: 0;
}

#histChart {
  width: 600px;
  height: 480px;
  border: 3px solid #8AC007;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>

<body>
  <canvas id="histChart" width="400" height="100"></canvas>
</body>

Leave a comment