Question 118833 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to hide grid lines in graphs in React chart js 2

I am using react-chartjs-2 version 5 and I want to hide the gridlines. I have tried this code snippet but did not work.

xAxes: [
    {
      display: false,
      gridLines: {
        display: false,
        zeroLineColor: "transparent"
      }
    }
  ],
  yAxes: [
    {
      display: false,
      gridLines: {
        display: false,
        zeroLineColor: "transparent"
      },
    }
  ]
Tags:

2

Answers


  1. 0

    Tried your snippet but its not working in react-chartjs-2 v5.2

    Solution: you can simply raplace xAxes, yAxes with x,y and instead of gridLines with grid inside scales

    scales: {
    x: {
      grid: {
        display: false
      }
    },
    y: {
      grid: {
        display: false
      }
    }
  }

    I removed gridlines here: removed gridlines here

    Login or Signup to reply.
  2. 0

    I run it on "react-chartjs-2": "^5.2.0", on React TS project:
    Just add In option for your chart grid display:false

    const options = {
    scales: {
        y: {
            grid: {
                display: false
            }
        },
        x: {
            grid: {
                display: false
            }
        },
    }
}
    
<Line options={options} data={data}/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search