[Chartjs]-Is there a global setting in Chart.js for beginAtZero?

by

7👍

✅

Yes, there is a global setting for beginAtZero in ChartJS and you can set it in the follwing way to make all chart’s yAxes to start at zero …

Chart.defaults.scale.ticks.beginAtZero = true; //set this at the beginning of your code

here’s a little example …

Chart.defaults.scale.ticks.beginAtZero = true;

var ctx = document.getElementById("chart1").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [5, 6, 7, 8],
        datasets: [{
						label: "chart # 1",
            data: [5, 6, 7, 8],
            backgroundColor: 'rgba(255, 99, 132, 0.3)',
            borderColor: 'rgba(255,99,132,1)',
            borderWidth: 1
        }]
    }
});

var ctx = document.getElementById("chart2").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [9, 10, 11, 12],
        datasets: [{
						label: "chart # 2",
            data: [9, 10, 11, 12],
            backgroundColor: 'rgba(54, 162, 235, 0.3)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart1"></canvas>
<canvas id="chart2"></canvas>

Leave a comment