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.

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.

Output: