Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove the Chart.js x Axis bottom line?

I am using Chart.js 2.8.0 trying to get rid of the X/Y axis border. With gridLines { showBorder: false }} I am still seeing the X axis border. I also have the color set to 0 alpha, all the other lines on X and Y are gone except for the bottom one on the X axis that just wont go away. Tries some other options like drawBorder: false and scaleLineColor: "rgba(0,0,0,0)", none affected the bottom line on the X axis. image

This is my chart configurations

    type: 'line',
    data: {
        datasets: [{
            label: '',
            data: [],
            backgroundColor: [],
            borderWidth: 1
        }]
    },
    options: {
        scaleLineColor: "rgba(0,0,0,0)",
        layout: {
            padding: {
            top: 20
            }
        },
        legend: {
            display: false
        },
        scales: {
            gridLines: {
                showBorder: false
            },
            xAxes: [{
                gridLines: {
                    color: "rgba(0, 0, 0, 0)",
                }
            }],
            yAxes: [{
                gridLines: {
                    color: "rgba(0, 0, 0, 0)",
                },
                ticks: {
                    beginAtZero: true,
                    display: false,
                }
            }]
        }
    }
};
like image 924
Sniffleh Avatar asked Dec 22 '22 23:12

Sniffleh


1 Answers

After some time fiddling with it I have found the solution zeroLineColor: 'transparent' did the trick. Found it here https://github.com/chartjs/Chart.js/issues/3950

scales: {
            xAxes: [{
                gridLines: {
                    zeroLineColor: 'transparent'
                },
            }],
like image 197
Sniffleh Avatar answered Jan 05 '23 20:01

Sniffleh