Approch 4: By Axes Configuration

Approach 3: By using Minimum Property

In this approach, we are setting the Axes configuration for y-axis. we are creating a function and setting the initial value as a 0.

Syntax:

options: {
                plugins: {
                    scales: {
                        y: {
                            beforeUpdate: function(scale) {
                                if (!scale.ticks.reverse) {
                                    scale.ticks.reverse = true;
                                    scale.ticks.push(0);
                                }
                            }
                        }
                    }
                }
            }

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>Chart.js Example 4</title> 
    <script src= 
"https://cdn.jsdelivr.net/npm/chart.js"> 
      </script> 
</head> 
  
<body> 
  
    <canvas id="example4" width="400" height="200"></canvas> 
  
    <script> 
        let ctx4 = document.getElementById('example4').getContext('2d'); 
        let chart4 = new Chart(ctx4, { 
            type: 'bar', 
            data: { 
                labels: ['Label 1', 'Label 2', 'Label 3'], 
                datasets: [{ 
                    label: 'My Dataset', 
                    data: [5, 10, 15], 
                    backgroundColor: ['rgba(255, 99, 132, 0.2)', 
                        'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)'], 
                    borderColor: ['rgba(255, 99, 132, 1)', 
                        'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'], 
                    borderWidth: 1 
                }] 
            }, 
            options: { 
                plugins: { 
                    scales: { 
                        y: { 
                            beforeUpdate: function (scale) { 
                                if (!scale.ticks.reverse) { 
                                    scale.ticks.reverse = true; 
                                    scale.ticks.push(0); 
                                } 
                            } 
                        } 
                    } 
                } 
            } 
        }); 
    </script> 
  
</body> 
  
</html>

Output:

Value set as “0”

How to Set Start Value as “0” in Chart.js ?

In this article, we are going to discuss how can we set 0 as a start value for any of the axes. we need to set 0 as a start value for a chart in Chart.js.

CDN Link:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

These are the following approaches for setting a 0 value as a start:

Table of Content

By Configuring Scales Options (Using beginAtZero)
By Custom Tick Callback
By using Minimum Property
By Axes Configuration

Tags:

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