How to hide y axis line in ChartJs?

A common way to hide the y-axis in Chart.js is by configuring the chart's options (options). Specifically, you can set the display property of the y-axis to false in the chart configuration. This completely hides the y-axis while keeping the chart data visible. Here is a specific example:

javascript
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Color Distribution',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                display: false  // Set to false to hide the y-axis
            }]
        }
    }
});

In this example, we first create the data configuration for a bar chart, including labels for colors and corresponding data. Then, in the options property, we set the display property of the first element in the yAxes array to false. This hides the y-axis, so the chart displayed to the user only shows the bar chart and x-axis labels without the y-axis. By doing this, we can effectively control the chart's displayed content to better meet specific presentation requirements.