CODEWITHSUNDEEP
javascriptchart.jschart.js2
Sniffleh
Sniffleh

Reputation: 319

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

Upvotes: 6

Views: 5966

Answers (5)

Anshu Meena
Anshu Meena

Reputation: 381

if anyone looking for answer with ChartJS v4 then try this

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

Upvotes: 2

hazeled
hazeled

Reputation: 111

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

Upvotes: 10

Lumen27
Lumen27

Reputation: 81

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.

Upvotes: 8

phan kosal
phan kosal

Reputation: 461

this answer for who are using recharts module :

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

Upvotes: 1

Sniffleh
Sniffleh

Reputation: 319

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

Upvotes: 10

Related Questions