How to usemin and max Properties in Chart.js
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:
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>