[Chartjs]-How to provide empty values for Chart.js data?

by

0👍

Well if you want a label to have empty data, you can pass a null value to the corresponding data index, but it will be treated as a 0.

For example:

var barChartData = {
  labels: ["dD 1", "dD 2", "dD 3", "dD 4", "dD 5", "dD 6", "dD 7", "dD 8", "dD 9", "dD 10"],
  datasets: [{
    fillColor: "rgba(0,60,100,1)",
    strokeColor: "black",
    data: [125, null, 12, 52, 65, 20, null, 40, 70, 45]
  }]
}

This is a Live working snippet:

var barChartData = {
  labels: ["dD 1", "dD 2", "dD 3", "dD 4", "dD 5", "dD 6", "dD 7", "dD 8", "dD 9", "dD 10"],
  datasets: [{
    fillColor: "rgba(0,60,100,1)",
    strokeColor: "black",
    data: [125, null, 12, 52, 65, 20, null, 40, 70, 45]
  }]
}

var index = 11;
var ctx = document.getElementById("canvas").getContext("2d");
var barChartDemo = new Chart(ctx).Bar(barChartData, {
  responsive: true,
  barValueSpacing: 2
});
.container {
  width: 80%;
  margin: 20px auto;
}

.p {
  text-align: center;
  font-size: 14px;
  padding-top: 140px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div class="container">
  <h2>Chart.js Responsive Bar Chart Demo</h2>
  <div>
    <canvas id="canvas"></canvas>
  </div>
</div>

Leave a comment