[Chartjs]-Trying to set scale ticks beginAtZero using Chart.js is unsuccessful, why?

by

1👍

✅

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);
                </script>

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

Leave a comment