Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ChartJS beginAtZero, min, max doesn't work

I tried every possible way, every form-answer but anything works inmy code. I want yAxes begin at zero and max value is 100 but all my chart begin with other values (see pic). What can I do?

var options = {
    responsive: true,
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                beginAtZero: true,
                max: 100,
                min: 0
            }
        }]
    },
    title: {
        display: true,
        text: name
    },
    tooltips: {
        mode: 'index',
        intersect: false,
    },
    hover: {
        mode: 'nearest',
        intersect: true
    },

};

Doesn't begin at zero

like image 623
Nikolas Avatar asked Jan 26 '17 17:01

Nikolas


2 Answers

key is to pass options in the Chart constructor instead of part of data

new Chart(ctx, {
    type: 'bar',
    data: {{ chart_data|safe }},
    options: {
        scales: {
            yAxes: [{
                display: true,
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

above works for me!

like image 133
vk-code Avatar answered Sep 28 '22 08:09

vk-code


Working for version 3.2.0:

  var options = {
  // plugins, responsive etc...

      scales: {
          y: {  
             min: 0
             }
          },

  //tooltips specifications...
  }

The y-axis will start at 0:

Chart rendered

like image 35
Dennis Kozevnikoff Avatar answered Sep 28 '22 08:09

Dennis Kozevnikoff