React JS Chart JS 2 is not hiding the grid lines in the background

Question

I am building a web application using React JS. My application needs to display some chart widgets on the dashboard. I am using React JS Chart 2 Package, https://www.npmjs.com/package/react-chartjs-2. I can display the chart but there is a problem with styling. I am trying to hide the grid lines in the background. It looks something like this now.

This is my code.

const data = {
    labels: ['1', '2', '3', '4', '5', '6'],
    datasets: [
        {
            label: '# of Red Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: '#6886b4',
        },
        {
            label: '# of Blue Votes',
            data: [2, 3, 20, 5, 1, 4],
            backgroundColor: '#9db8d7',
        },
        {
            label: '# of Green Votes',
            data: [3, 10, 13, 15, 22, 30],
            backgroundColor: '#112c61',
        },
    ],
};

const options = {
    scales: {
        yAxes: [
            {
                gridLines: {
                    display:false
                }
            }
        ],
        xAxes: [
            {
                gridLines: {
                    display:false
                }
            }
        ],
    },
};

const GroupedBarChartWidget = (props) => {
    
    return (
        <>
            <div className={"box"}>
                <div className={"box-content"}>
                    <Bar data={data} options={options} />
                </div>
            </div>
        </>
    )
}

As you can see I am trying to hide the gridlines in the background using this.

gridLines: {
                    display:false
                }

But they are still there. What is wrong with my code and how can I fix it?

Answer 1

you are using V2 syntax with V3,

your config needs to be like this:

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

For all differences please read the migration guide