How to usethe Y-axis display option in JavaScript

In this approach, we hide the y-axis line by setting the display option as falses for the Y-axis in the scale configuration.
In the example, we can see that, we can view the X-axis line only, the Y-axis line is hidden in the chart.

Syntax:

  let options = {
    scales: {
      y: {
        display: false 
      }
    }
  };

Example: Below is the implementation of the above-discussed approach.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Example 1</title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
      </script>
</head>
 
<body>
    <h1 style="color: green;">w3wiki</h1>
    <h3>Approach 1: Using Y-axis display option</h3>
    <canvas id="myChart" width="400" height="200"></canvas>
    <script>
        let data = {
            labels: ["JS", "Python", "C++", "HTML", "ReactJS"],
            datasets: [{
                label: 'Programming Languages',
                data: [50, 70, 45, 80, 60],
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        };
        let options = {
            scales: {
                y: {
                    display: false
                }
            }
        };
        let ctx = document.getElementById('myChart').getContext('2d');
        let myChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: options
        });
    </script>
</body>
 
</html>

Output:

How to Hide y Axis Line in ChartJs ?

In Chart.JS we can display our information in visual forms. For the customization of the chart, we can remove or hide the Y-axis line from the Chart appearance as per the requirement. We can use two different approaches to hide the y-axis line in the Chart.JS. We will see the practical implementation of these approaches in terms of examples and outputs.

Below are the possible approaches:

Table of Content

Using the Y-axis display option
Using ticks option

Tags:

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

CDN link

Approach 2: Using ticks option

How to usethe Y-axis display option in JavaScript

Syntax:

HTML

How to Hide y Axis Line in ChartJs ?

Similar Reads