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

Question

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.

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,
                }
            }]
        }
    }
};

Aliaalias

Possible duplicate of How to remove the line/rule of an axis in Chart.js? – Ronironica

No. As stated above, I have used the solution in that question unsuccessfully. – Aliaalias

Answer 1

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'
                },
            }],

Aliaalias

Answer 2

For anyone looking for the answer in v5, it's: options.scales.x.border.display: false;

Correna

I am someone who was looking for the answer in v5! Thank you! This works perfectly. – Kobold

Answer 3

If anyone is on v3 and is looking for the answer, its options.scales.x.grid.drawBorder: false

This is on v3.7.1 Found it by complete accident by looking through the typescript file and trying anything that looked relevant.

Chrome

Answer 4

this answer for who are using recharts module :

<XAxis strokeOpacity={0} dataKey="name" />

Premature

Answer 5

if anyone looking for answer with ChartJS v4 then try this

scales: {
y: {
 border: {
  display: false
  }
 }
}

Fogged