[Bug]: vue-tsc reports type errors

[merlinstardust]

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

When trying to add a Scatter chart or a Line chart, I get several TypeScript errors and unfortunately, the errors are very long and hard to parse, so I have no idea what is wrong. This may happen with other chart types as well, but Scatter and Line (especially a combined Scatter with line data) is what I need.

Or in some cases, the error is simple but makes no sense. For instance, I get Type '"radialLinear"' is not assignable to type '"linear"'. but I'm not using radialLinear at all, so I don't know why it's complaining.

I tried importing types and assigning them to my variables, but that still doesn't work.

This could be related to #1048, but I also had this issue when I didn't mix chart types.

Link to repo/CI with type issues (also copied below for ease of access)

Error: src/components/ExampleGraph.vue(3,14): error TS2322: Type '{ labels: any[]; datasets: ({ type: string; xAxisID: string; data: { x: number; y: number; }[]; pointStyle: boolean; borderWidth: number; borderColor: string; backgroundColor: string; } | { type: string; xAxisID: string; ... 4 more ...; backgroundColor?: undefined; })[]; }' is not assignable to type 'ChartData<"scatter", (number | Point | null)[], unknown>'.
  Types of property 'datasets' are incompatible.
    Type '({ type: string; xAxisID: string; data: { x: number; y: number; }[]; pointStyle: boolean; borderWidth: number; borderColor: string; backgroundColor: string; } | { type: string; xAxisID: string; data: { x: number; y: number; }[]; pointStyle: boolean; borderColor: string; borderWidth?: undefined; backgroundColor?: und...' is not assignable to type 'ChartDataset<"scatter", (number | Point | null)[]>[]'.
      Type '{ type: string; xAxisID: string; data: { x: number; y: number; }[]; pointStyle: boolean; borderWidth: number; borderColor: string; backgroundColor: string; } | { type: string; xAxisID: string; data: { x: number; y: number; }[]; pointStyle: boolean; borderColor: string; borderWidth?: undefined; backgroundColor?: unde...' is not assignable to type 'ChartDataset<"scatter", (number | Point | null)[]>'.
        Type '{ type: string; xAxisID: string; data: { x: number; y: number; }[]; pointStyle: boolean; borderWidth: number; borderColor: string; backgroundColor: string; }' is not assignable to type 'ChartDataset<"scatter", (number | Point | null)[]>'.
          Type '{ type: string; xAxisID: string; data: { x: number; y: number; }[]; pointStyle: boolean; borderWidth: number; borderColor: string; backgroundColor: string; }' is not assignable to type '_DeepPartialObject<{ type: "scatter"; } & LineControllerDatasetOptions>'.
            Types of property 'type' are incompatible.
              Type 'string' is not assignable to type '"scatter"'.
Error: src/components/ExampleGraph.vue(3,27): error TS2322: Type '{ responsive: boolean; maintainAspectRatio: boolean; plugins: { legend: { display: boolean; }; }; elements: { point: { radius: number; }; line: { borderWidth: number; }; }; scales: { y: { title: { display: boolean; text: string; color: string; font: { ...; }; }; grid: { ...; }; border: { ...; }; ticks: { ...; }; }; ...' is not assignable to type '_DeepPartialObject<CoreChartOptions<"scatter"> & ElementChartOptions<"scatter"> & PluginChartOptions<"scatter"> & DatasetChartOptions<"scatter"> & ScaleChartOptions<...> & LineControllerChartOptions>'.
  Types of property 'scales' are incompatible.
    Type '{ y: { title: { display: boolean; text: string; color: string; font: { family: string; size: number; weight: string; }; }; grid: { display: boolean; }; border: { color: string; width: number; }; ticks: { align: string; stepSize: number; color: string; font: { family: string; size: number; weight: string; }; }; }; x:...' is not assignable to type '_DeepPartialObject<{ [key: string]: ScaleOptionsByType<keyof CartesianScaleTypeRegistry>; }>'.
      Property 'y' is incompatible with index signature.
        Type '{ title: { display: boolean; text: string; color: string; font: { family: string; size: number; weight: string; }; }; grid: { display: boolean; }; border: { color: string; width: number; }; ticks: { align: string; stepSize: number; color: string; font: { family: string; size: number; weight: string; }; }; }' is not assignable to type '_DeepPartialObject<{ type: "time"; } & Omit<CartesianScaleOptions, "min" | "max"> & { min: string | number; max: string | number; suggestedMin: string | number; ... 5 more ...; ticks: { ...; }; }> | ... 4 more ... | undefined'.
          Type '{ title: { display: boolean; text: string; color: string; font: { family: string; size: number; weight: string; }; }; grid: { display: boolean; }; border: { color: string; width: number; }; ticks: { align: string; stepSize: number; color: string; font: { family: string; size: number; weight: string; }; }; }' is not assignable to type '_DeepPartialObject<{ type: "timeseries"; } & Omit<CartesianScaleOptions, "min" | "max"> & { min: string | number; max: string | number; suggestedMin: string | number; ... 5 more ...; ticks: { ...; }; }>'.
            The types of 'ticks.align' are incompatible between these types.
              Type 'string' is not assignable to type '"inner" | "start" | "center" | "end" | undefined'.
Error: src/components/ExampleUnmixedGraph.vue(3,11): error TS2322: Type '{ labels: any[]; datasets: { data: { x: number; y: number; }[]; pointStyle: boolean; borderColor: string; }[]; }' is not assignable to type 'ChartData<"line", (number | Point | null)[], unknown>'.
  Types of property 'datasets' are incompatible.
    Type '{ data: { x: number; y: number; }[]; pointStyle: boolean; borderColor: string; }[]' is not assignable to type 'ChartDataset<"line", (number | Point | null)[]>[]'.
      Type '{ data: { x: number; y: number; }[]; pointStyle: boolean; borderColor: string; }' is not assignable to type 'ChartDataset<"line", (number | Point | null)[]>'.
        Type '{ data: { x: number; y: number; }[]; pointStyle: boolean; borderColor: string; }' is not assignable to type '_DeepPartialObject<{ type: "line"; } & LineControllerDatasetOptions & FillerControllerDatasetOptions>'.
          Types of property 'pointStyle' are incompatible.
            Type 'boolean' is not assignable to type 'false | "line" | "circle" | "rect" | "dash" | "cross" | "crossRot" | "rectRounded" | "rectRot" | "star" | "triangle" | ((ctx: ScriptableContext<"line">, options: AnyObject) => PointStyle | undefined) | _DeepPartialObject<...> | _DeepPartialObject<...> | readonly (false | ... 12 more ... | undefined)[] | undefined'.
Error: src/components/ExampleUnmixedGraph.vue(3,24): error TS2322: Type '{ responsive: boolean; maintainAspectRatio: boolean; plugins: { legend: { display: boolean; }; }; elements: { point: { radius: number; }; line: { borderWidth: number; }; }; scales: { y: { title: { display: boolean; text: string; color: string; font: { ...; }; }; grid: { ...; }; border: { ...; }; ticks: { ...; }; }; ...' is not assignable to type '_DeepPartialObject<CoreChartOptions<"line"> & ElementChartOptions<"line"> & PluginChartOptions<"line"> & DatasetChartOptions<"line"> & ScaleChartOptions<...> & LineControllerChartOptions>'.
  Types of property 'scales' are incompatible.
    Type '{ y: { title: { display: boolean; text: string; color: string; font: { family: string; size: number; weight: string; }; }; grid: { display: boolean; }; border: { color: string; width: number; }; ticks: { align: string; stepSize: number; color: string; font: { family: string; size: number; weight: string; }; }; }; x:...' is not assignable to type '_DeepPartialObject<{ [key: string]: ScaleOptionsByType<keyof CartesianScaleTypeRegistry>; }>'.
      Property 'y' is incompatible with index signature.
        Type '{ title: { display: boolean; text: string; color: string; font: { family: string; size: number; weight: string; }; }; grid: { display: boolean; }; border: { color: string; width: number; }; ticks: { align: string; stepSize: number; color: string; font: { family: string; size: number; weight: string; }; }; }' is not assignable to type '_DeepPartialObject<{ type: "time"; } & Omit<CartesianScaleOptions, "min" | "max"> & { min: string | number; max: string | number; suggestedMin: string | number; ... 5 more ...; ticks: { ...; }; }> | ... 4 more ... | undefined'.
          Type '{ title: { display: boolean; text: string; color: string; font: { family: string; size: number; weight: string; }; }; grid: { display: boolean; }; border: { color: string; width: number; }; ticks: { align: string; stepSize: number; color: string; font: { family: string; size: number; weight: string; }; }; }' is not assignable to type '_DeepPartialObject<{ type: "timeseries"; } & Omit<CartesianScaleOptions, "min" | "max"> & { min: string | number; max: string | number; suggestedMin: string | number; ... 5 more ...; ticks: { ...; }; }>'.
            The types of 'ticks.align' are incompatible between these types.
              Type 'string' is not assignable to type '"inner" | "start" | "center" | "end" | undefined'.
ERROR: "type-check" exited with 2.

Reproduction

merlinstardust/chartjs-type-issue#1

chart.js version

4.3.0

vue-chartjs version

5.2.0

Possible solution

I am currently solving this by setting data and options to the any type, though I would prefer not to do that.

I would like to see an example set of code with typings so I can emulate that.