Trying to set scale ticks beginAtZero using Chart.js is unsuccessful, why?

Question

Trying to doing this chart is a big deal with the 0, I need to start at 0 and not at 650 as you can see in the image.

What I'm doing wrong?, I cannot solve it:

Look the image of the chart here

Look the code, it is the same as the documentation says:

The documentation of Chart.js says:

    options: {
            scale: {
                reverse: true,
                ticks: {
                    beginAtZero: true
                }
            }
    }
});

// This will create a chart with all of the default options, merged from the global config,
//  and the Radar chart defaults but this particular instance's scale will be reversed as
// well as the ticks beginning at zero.

Sanjay Dutt · Accepted Answer

First of all the code snippet that you are using for scale setting is wrong. Below is the right code for setting scale so that it will start from zero.

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

Second, there is one mistake in your code. You forget the closing curly brace for data property but you add an extra curly brace at the end. Below is the working code.

var ctx = document.getElementById("myChart2015_5853aee63b981");
                var myChart2015_5853aee63b981 = new Chart(ctx, {
                    type: 'bar',
                    data: {

            labels: ["Trimestre 1", "Trimestre 2", "Trimestre 3", "Trimestre 4"],
            datasets: [
                            {backgroundColor:['rgba(255, 99, 132, 0.2)','rgba(255, 99, 132, 0.2)','rgba(255, 99, 132, 0.2)','rgba(255, 99, 132, 0.2)'],borderColor:['rgba(255, 99, 132, 1)','rgba(255, 99, 132, 1)','rgba(255, 99, 132, 1)','rgba(255, 99, 132, 1)'], 
                        type: 'bar',
                        label: 'Total de pacientes',
                        data: [712,913,1030,1091],
                        options:  { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, 
                            {backgroundColor:['rgba(204, 230, 255,0.2)'],borderColor:['rgba(2, 173, 80,1)'], 
                        type: 'line',
                        label: 'Límite superior',
                        data: [700,700,700,700],
                        options:  { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, 
                            {backgroundColor:['rgba(36, 143, 36,0)'],borderColor:['rgba(75, 172, 198,1)'], 
                        type: 'line',
                        label: 'Meta',
                        data: [700,700,700,700],
                        options:  { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }, 
                            {backgroundColor:['rgba(51, 51, 26,0)'],borderColor:['rgba(182, 87, 8,1)'], 
                        type: 'line',
                        label: 'Límite inferior',
                        data: [650,650,650,650],
                        options:  { tension:0.0, bezierCurve:false },borderWidth: 1,tension:0.25 }  
            ]},
                options: {
                        tension:1,
                        scaleBeginAtZero: true,
                        scaleStartValue: 0,
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero:true
                                }
                            }]
                        }

                    }
                });
                console.log(myChart2015_5853aee63b981);

P.S :- If you don't understand the mistake compare your code with mine you will know.

Trying to set scale ticks beginAtZero using Chart.js is unsuccessful, why?

Answers (1)

Related Questions