[Chartjs]-Chart.JS To Not Start At 0

by

2👍

✅

I am unable to reproduce the issue.

It works as long as you have this setting beginAtZero: false – this works for the yAxis, however.

It seems that you are looking for handling the array returned. I would simply modify the chart similar to demo below.

See demo below

window.onload = function() {
  var barChartData = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [{
      label: 'Hornsby',
      backgroundColor: '#ff0000',
      borderColor: '#ff9900',
      borderWidth: 1,
      data: [0, 0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 99]
    }]
  };

  var ctx = document.getElementById("canvas").getContext("2d");


  window.myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
      responsive: true,
      scales: {
        xAxes: [{
          ticks: {
            beginAtZero: false,
            suggestedMin: 3
          }
        }]
      },
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Title'
      }
    }
  });
};
#canvas {
  width: 500px;
  height: 300px;
  border: 1px solid lightgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

UPDATE

The code from your PHP/JS could change slightly as well. Assuming your data looks like this:

[“Stanley”,0,0,10,20,30,50000,400000,70000,700,800,900,1111]

Then you could make these changes (note: I have not tested them)

var jsondata = <?php echo $data; ?>;
var values = [];

// Iterate through loop starting at position 1 
// (position zero has a name, not a value)
for (var i=1; i<jsondata.length; i++) {
    values.push(jsondata[i]);  // we end up with 12 values
}

// this could be hard-coded
var labelsarr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 ...
// label could be coming from the data set
// the first element in the array has a label, let's use it
label: jsondata[0],

Leave a comment