6

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

5 Answers 5

10

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

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

1
  • 1
    I am someone who was looking for the answer in v5! Thank you! This works perfectly.
    – doteth
    Commented Dec 24, 2022 at 19:27
8

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.

1

this answer for who are using recharts module :

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

if anyone looking for answer with ChartJS v4 then try this

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.