Type Mode not accepting strings "x", "y" or "xy"

[AnnabellBrocker]

I have installed the following version:

chart-js-plugin-zoom: 2.0.1
chart.js: 4.2.1
react-chartjs-2: 5.2.0
typescript: 4.1.6
...

When defining the mode for the zoom within the options for a Barchart of Chart.js, I receive the error:

The types of 'plugins.zoom.zoom.mode' are incompatible between these types.
    Type 'string' is not assignable to type '"x" | "y" | "xy" | ((chart: Chart<"bar" | "line" | "scatter" | "bubble" | "pie" | "doughnut" | "polarArea" | "radar", (number | [number, number] | Point | BubbleDataPoint | null)[], unknown>) => Mode) | undefined'.

Options:

const options = {
            zoom: {
                zoom: {
                    wheel: {
                        enabled: true,
                    },
                    pinch: {
                        enabled: true
                    },
                    mode: 'x'
                }
            }
        }
    }

However, you define a local type in advance via type Mode = 'x' | 'y' | 'xy'; in the same file and using mode: 'x' as Mode I do not receive the error.

Any ideas why this happens?

[langy]

@AnnabellBrocker I've encountered the exact same error, thank you so much for providing the interim solution until this gets fixed, it saved my bacon.

[cooper-cooper]

I've faced same error with following packages(versions). many thanks for providing interim solution.

"chart.js": "^4.3.0",
"chartjs-plugin-zoom": "^2.0.1",
"react": "^18.2.0",
"react-chartjs-2": "^5.2.0",
"typescript": "^4.9.5",

[kurkle]

This is a typescript thing.

You can define the mode separately: const mode: Mode = 'x'

or typecast it mode: 'x' as Mode, or mode: 'x' as const