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...