ChartJS react-chart-js2 Options not working

Question

I am using "chart.js": "^3.3.2", and "react-chartjs-2": "^3.0.3". I am trying to modify the axes mainly but it seems to not work at all like nothing works in the options components. I have seen the old version had that issue but this one is over V2. To get started with options component I try to add colors to the axis. However, it does not display the color.

import React from 'react'
import { Bar } from 'react-chartjs-2';
export const BarChart: React.FC<Props> = (props) => {
       return (
           <Bar
            type='bar'
            data={{
                labels: xaxis,
                datasets: generatedataset()
            }}
            height={400}
            width={600}
            options={{
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        gridLines: {
                            zeroLineColor: '#ffcc33'
                        }
                    }],
                    yAxes: [
                        {
                            ticks: {
                                beginAtZero: false
                            }
                        }
                    ]
                }
            }}

        />)
}`enter code here`

Answer 1

Chart.js V3 has some major breaking changes, please read the migration guide for these: https://www.chartjs.org/docs/master/getting-started/v3-migration.html

For your problem you need to remove the arrays and define each scale in the scales object with the id as the key