CODEWITHSUNDEEP
javascriptreactjschart.js
Akila Liyanage
Akila Liyanage

Reputation: 33

How can I remove the grid lines in Chart.js

enter image description here

I'm using charts in my react app. I tried using the Scales and gridlines: false option but it is not working from me. the image shows my code.

Thank you.

Upvotes: 1

Views: 5446

Answers (2)

Umesh Chityala
Umesh Chityala

Reputation: 1

You can use below code to remove gridlines and if you want to enable X and Y axis its useful

 gridLines: {
                  display: true,
                  zeroLineColor:'white',
                  color:'transparent'
                }

Upvotes: 0

lotype
lotype

Reputation: 613

You might check a chart.js sample. From there I found some deviations in the object setup of your example

        var config = {
            type: 'line',
            data: {
                datasets: [{
                    // Here starts your snippet
                }]
            },
            options: {
                // The options are outside of the datasets property
                scales: {
                    x: {
                        gridLines: {
                          display: false
                        }
                    },
                    y: {
                        gridLines: {
                          display: false
                        }
                    }
                }
            }
        };

Edit 1: updated the scales with the gridLines property

Upvotes: 2

Related Questions