How to Set Max and Min Value for Y Axis in Chart.js ?
Last Updated :
02 Jan, 2024
In Chart.js, while working on the Y-axis of the Chart, we often need to adjust the minimum and maximum values of the Y-axis to represent the data in proper and accurate values. In this article, we will see two different approaches for adjusting the min and max values for the Y-axis in Chart.js.
ChartJS CDN Link
You need to add the below link to your HTML document to use Chart.js.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Approach 1: Using suggestedMin and suggestedMax Properties
In this approach, we will use the scales configuration for the Y-axis to set max and min values. We have used the properties of suggestedMin and suggestedMax. Initially, we have set these values to -1000 and 2200. We can change it and adjust the max and min values in the Chart.
Syntax:
options: {
scales: {
y: {
suggestedMin: minValue,
suggestedMax: maxValue
}
}
}
Example: The below example explains the use of suggestedMin and suggestedMax values to set min and max values for the Y-axis.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Example 1</ title >
< script src =
</ script >
</ head >
< body >
< div style = "width:100%; margin:auto;" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h5 >
Approach 1: Using suggestedMin
and suggestedMax Properties
</ h5 >
< canvas id = "myChart" ></ canvas >
</ div >
< script >
const labels =
["January", "February", "March", "April", "May"];
const data = [500, 800, 300, 1200, 600];
const ctx = document.
getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'GeeksforGeeks Data',
data: data,
backgroundColor:
'rgba(75, 192, 192, 0.2)',
borderColor:
'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
suggestedMin: -1000,
suggestedMax: 2200,
}
}
}
});
</ script >
</ body >
</ html >
|
Output:
Approach 2: Using min and max Properties
In this approach, we are using the min and max properties within the Y-axis scale configuration. We have set the min value as 0 and the max value as 120. Using this option we can control the value ranges on the Y-axis.
Syntax:
options: {
scales: {
y: {
beginAtZero: true,
min: minValue,
max: maxValue
}
}
}
Example: The below code example uses the min and max properties to set min and max values for the Y-axis.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Example 1</ title >
< script src =
</ script >
</ head >
< body >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h5 >
Approach 2: Using min and
max Properties
</ h5 >
< canvas id = "myChart" ></ canvas >
< script >
const data = {
labels:
['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'GeeksforGeeks Data',
data: [15, 25, 10, 30, 20],
backgroundColor:
'rgba(75, 192, 192, 0.2)',
borderColor:
'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
};
const config = {
type: 'bar',
data: data,
options: {
scales: {
y: {
beginAtZero: true,
min: 0,
max: 120
}
}
}
};
const ctx = document.
getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, config);
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...