How to remove the line/rule of an axis in chart.js?

by filiberto , in category: Javascript , a year ago

How to remove the line/rule of an axis in chart.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by lindsey.homenick , 10 months ago

@filiberto 

To remove the line or rule of an axis in Chart.js, you can use the display property in the options of the specific axis that you want to hide. Here is an example of how to remove the line of the x-axis in a chart:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var myChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            x: {
                display: false // hide x-axis line
            },
            y: {
                display: true // show y-axis line
            }
        }
    }
});


In the above example, the display property is set to false for the x-axis to hide the line. You can do the same for the y-axis or any other axis by modifying the respective scale options.

Related Threads:

How to remove axis path/line during transition in d3.js?
How to customize y-axis labels on a chart.js line chart?
How to change the color of a d3.js axis line?
How to change the x-axis line from top to bottom in d3.js
How to change x-axis interval on chart.js?
How to change x-axis interval in chart.js?