How to Set Start Value as “0” in Chart.js ?
Last Updated :
03 Jan, 2024
In this article, we are going to discuss how can we set 0 as a start value for any of the axes. we need to set 0 as a start value for a chart in Chart.js.
CDN Link:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
These are the following approaches for setting a 0 value as a start:
Approach 1: By Configuring Scales Options (Using beginAtZero)
In this approach, we Utilize the scale arrangement’s beginAtZero: genuine boundary. Regardless of what your information range is, this clear change ensures that the y-hub generally begins at 0.
Syntax:
options: {
scales: {
y: {
beginAtZero: true
}
}
}
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Chart.js Example 1</ title >
< script src =
</ script >
</ head >
< body >
< canvas id = "example1" width = "300" height = "100" ></ canvas >
< script >
let ctx1 = document.getElementById('example1').getContext('2d');
let chart1 = new Chart(ctx1, {
type: 'bar',
data: {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [{
label: 'My Dataset',
data: [5, 10, 15],
backgroundColor: ['rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</ script >
</ body >
</ html >
|
Output:
Approach 2: By Custom Tick Callback
In this approach, we have defined a function to generate desired ticks that is 0.
Syntax:
options: {
scales: {
y: {
ticks: {
callback: function(value) {
return value >= 0 ? value : "";
}
}
}
}
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Chart.js Example 2</ title >
< script src =
</ script >
</ head >
< body >
< canvas id = "example2" width = "400" height = "200" ></ canvas >
< script >
let ctx2 = document.getElementById('example2').getContext('2d');
let chart2 = new Chart(ctx2, {
type: 'bar',
data: {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [{
label: 'My Dataset',
data: [5, 10, 15],
backgroundColor: ['rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
borderWidth: 1
}]
},
options: {
scales: {
y: {
ticks: {
callback: function (value) {
return value >= 0 ? value : "";
}
}
}
}
}
});
</ script >
</ body >
</ html >
|
Output:
Approach 3: By using Minimum Property
In this approach, we are setting 0 to the minimum proerty of y in a scale configuration so that it starts with 0 only.
Syntax:
options: {
scales: {
y: {
min: 0
}
}
}
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Chart.js Example 3</ title >
< script src =
</ script >
</ head >
< body >
< canvas id = "example3" width = "400" height = "200" ></ canvas >
< script >
let ctx3 = document.getElementById('example3').getContext('2d');
let chart3 = new Chart(ctx3, {
type: 'bar',
data: {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [{
label: 'My Dataset',
data: [5, 10, 15],
backgroundColor: ['rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
borderWidth: 1
}]
},
options: {
scales: {
y: {
min: 0
}
}
}
});
</ script >
</ body >
</ html >
|
Output:
Approch 4: By Axes Configuration
In this approach, we are setting the Axes configuration for y-axis. we are creating a function and setting the initial value as a 0.
Syntax:
options: {
plugins: {
scales: {
y: {
beforeUpdate: function(scale) {
if (!scale.ticks.reverse) {
scale.ticks.reverse = true;
scale.ticks.push(0);
}
}
}
}
}
}
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Chart.js Example 4</ title >
< script src =
</ script >
</ head >
< body >
< canvas id = "example4" width = "400" height = "200" ></ canvas >
< script >
let ctx4 = document.getElementById('example4').getContext('2d');
let chart4 = new Chart(ctx4, {
type: 'bar',
data: {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [{
label: 'My Dataset',
data: [5, 10, 15],
backgroundColor: ['rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
borderWidth: 1
}]
},
options: {
plugins: {
scales: {
y: {
beforeUpdate: function (scale) {
if (!scale.ticks.reverse) {
scale.ticks.reverse = true;
scale.ticks.push(0);
}
}
}
}
}
}
});
</ script >
</ body >
</ html >
|
Output:
Value set as “0”
Share your thoughts in the comments
Please Login to comment...