CODEWITHSUNDEEP
javascriptchart.js
Conny Olsson
Conny Olsson

Reputation: 1577

Is there a global setting in Chart.js for beginAtZero?

I know i can set the options for each chart like:

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

I'm using alot of charts and would like ALL chart's yaxis to start at zero as default.

I'm using Chart.js 2.3.0.

Upvotes: 3

Views: 2562

Answers (1)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32859

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>

Upvotes: 7

Related Questions