[Bug]: Type error for `Line` `options` with `chartjs-zoom-plugin`

[wcheek]

trafficstars

Would you like to work on a fix?

• [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

The Line object should accept options with types needed to use chartjs-zoom-plugin.

When trying to build the project, I get the following error:

vite v5.1.0 building for production...
src/components/myFile.vue:23:7 - error TS2322: Type '{ responsive: boolean; maintainAspectRatio: boolean; plugins: { colors: { forceOverride: boolean; }; zoom: { pan: { enabled: boolean; mode: string; modifierKey: string; }; zoom: { mode: string; wheel: { enabled: boolean; }; pinch: { ...; }; drag: { ...; }; }; }; }; }' is not assignable to type '_DeepPartialObject<CoreChartOptions<"line"> & ElementChartOptions<"line"> & PluginChartOptions<"line"> & DatasetChartOptions<"line"> & ScaleChartOptions<...> & LineControllerChartOptions>'.

23       :options="options"
         ~~~~~~~~

  node_modules/vue-chartjs/dist/types.d.ts:18:5
    18     options?: ChartOptions<TType>;
           ~~~~~~~
    The expected type comes from property 'options' which is declared here on type 'Partial<{}> & Omit<{ readonly data: ChartData<"line", (number | Point | null)[], unknown>; readonly options?: _DeepPartialObject<CoreChartOptions<"line"> & ElementChartOptions<"line"> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...> & LineControllerChartOptions> | undefined; readonly plu...'


Found 1 error.

ERROR: "type-check" exited with 2.

I've tried making options a reactive object. The only way I can get vite to not complain is by specifying const options: any = {...} but of course this is not ideal. Maybe this is a problem with the chartjs-zoom-plugin.

Reproduction

https://stackblitz.com/edit/github-am2v7z?file=src%2FchartConfig.ts

chart.js version

^4.4.2

vue-chartjs version

5.3.0

Possible solution

You can get around the bug by declaring the type of options as any but this is not a fix.

[mathiasrando]

I'm currently using this in a project and it works fine if you do: ChartOptions<"line"> as type for the options.

You import type ChartOptions from chart.js.