How to usemin and max Properties in Chart.js

Approach 1: Using suggestedMin and suggestedMax 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:

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>

Tags:

#Chart.js #Geeks Premier League 2023 #Geeks Premier League #JavaScript #Web Technologies