Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unable to make y-axis to begin at zero on Charts.js v2.1.4

Tags:

chart.js

When using the following code to generate a chart, I am not able to set the scale to begin at zero, even setting that option.

Here is the code (JSFiddle)

var simpleChart = new Chart(document.getElementById('chart'), {
    type: 'bar',
    data: {
      labels: ['Online', 'Offline'],
      datasets: [{
        label: "# of servers",
        data: [1, 7],
        backgroundColor: [
            '#009245',
            '#c02a31'
        ]
      }]
    },
    options: {
        title: {
            display: false
        },
        scales: {
            yAxes: [{
                beginAtZero: true
            }]
        }
    }
});

Is this a bug? What should I do to be able to set the scale to really start at 0?

Also, how can I disable that "# of servers" label from being rendered?

like image 994
Edu Felipe Avatar asked Dec 05 '22 17:12

Edu Felipe


1 Answers

I had the same problems. You have to define "ticks" within the yAxes-definition:

scales: {
          yAxes: [{
            ticks: {
                beginAtZero: true
            }
          }]
}

Updated fiddle: https://jsfiddle.net/r90Ljzvo/5/

like image 87
Tetzlove Avatar answered Jun 24 '23 08:06

Tetzlove