How to Set Max and Min Value for Y Axis in Chart.js ?
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.
Table of Content
- Using suggestedMin and suggestedMax Properties
- Using min and max Properties
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 = "https://cdn.jsdelivr.net/npm/chart.js" > </ script > </ head > < body > < div style = "width:100%; margin:auto;" > < h2 style = "color:green" > w3wiki </ 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: 'w3wiki 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 = "https://cdn.jsdelivr.net/npm/chart.js" > </ script > </ head > < body > < h2 style = "color:green" > w3wiki </ 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: 'w3wiki 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:
Contact Us