TypeScript Compile Error for Mixed Chart Type

[isaacsando]

Issue

I'm unable to get the below TypeScript to compile due to a type error when using a mixed chart type. According to the Chart.js documentation the type property is set on each dataset when creating a mixed chart (not outside of it like all other charts). The chartjs-plugin-datalabels documentation states that the plugin options can be set per data level so I'm unsure as to why this error is happening. Any insight is appreciated. Thank you!

import { Chart } from "chart.js/auto";
import ChartDataLabels from "chartjs-plugin-datalabels";

const chart = new Chart(<HTMLCanvasElement>document.getElementById("mixed"), {
  plugins: [ChartDataLabels],
  data: {
    datasets: [
      {
        // Change options only for labels of THIS DATASET
        datalabels: {         // <-- these three lines cause the error
          color: "#FFCE56",   //
        },                    //
        type: "bubble",
        label: "Bar Dataset",
        data: [
          // 10, 20, 30, 40,
          { x: 15, y: 20, r: 10 },
          { x: 25, y: 10, r: 20 },
        ],
      },
      {
        type: "line",
        label: "Line Dataset",
        data: [
          { x: 10, y: 10 },
          { x: 20, y: 20 },
          { x: 30, y: 30 },
        ],
      },
    ],
  },
});

Here is the full error:

[tsl] ERROR in /home/isaac/typescript/my-project/src/index.ts(10,9)
      TS2345: Argument of type '{ plugins: Plugin<keyof ChartTypeRegistry, AnyObject>[]; data: { datasets: ({ datalabels: { color: string; }; type: "bubble"; label: string; data: { x: number; y: number; r: number; }[]; } | { ...; })[]; }; }' is not assignable to parameter of type 'ChartConfiguration<keyof ChartTypeRegistry, { x: number; y: number; r: number; }[] | { x: number; y: number; }[], unknown> | ChartConfigurationCustomTypesPerDataset<keyof ChartTypeRegistry, { ...; }[] | { ...; }[], unknown>'.
  Type '{ plugins: Plugin<keyof ChartTypeRegistry, AnyObject>[]; data: { datasets: ({ datalabels: { color: string; }; type: "bubble"; label: string; data: { x: number; y: number; r: number; }[]; } | { ...; })[]; }; }' is not assignable to type 'ChartConfigurationCustomTypesPerDataset<keyof ChartTypeRegistry, { x: number; y: number; r: number; }[] | { x: number; y: number; }[], unknown>'.
    The types of 'data.datasets' are incompatible between these types.
      Type '({ datalabels: { color: string; }; type: "bubble"; label: string; data: { x: number; y: number; r: number; }[]; } | { type: "line"; label: string; data: { x: number; y: number; }[]; })[]' is not assignable to type 'ChartDatasetCustomTypesPerDataset<keyof ChartTypeRegistry, { x: number; y: number; r: number; }[] | { x: number; y: number; }[]>[]'.
        Type '{ datalabels: { color: string; }; type: "bubble"; label: string; data: { x: number; y: number; r: number; }[]; } | { type: "line"; label: string; data: { x: number; y: number; }[]; }' is not assignable to type 'ChartDatasetCustomTypesPerDataset<keyof ChartTypeRegistry, { x: number; y: number; r: number; }[] | { x: number; y: number; }[]>'.
          Type '{ datalabels: { color: string; }; type: "bubble"; label: string; data: { x: number; y: number; r: number; }[]; }' is not assignable to type 'ChartDatasetCustomTypesPerDataset<keyof ChartTypeRegistry, { x: number; y: number; r: number; }[] | { x: number; y: number; }[]>'.
            Object literal may only specify known properties, and 'datalabels' does not exist in type '_DeepPartialObject<{ type: "bubble"; } & BubbleControllerDatasetOptions> & ChartDatasetPropertiesCustomTypesPerDataset<keyof ChartTypeRegistry, { ...; }[] | { ...; }[]>'.

Environment Info

I'm using VS Code for editing and Webpack when compiling.

Chart.js: 4.0.1
chartjs-plugin-datalabels: 2.2.0

TypeScript: 4.9.4
tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "target": "es5",
    "module": "es6",
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "sourceMap": true
  }
}

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  devtool: "inline-source-map",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

[hallofblood]

I have the exact same problem using Ionic and Angular

[isaacsando]

I was able to get this to compile by changing the interface name ChartDatasetProperties to ChartDatasetPropertiesCustomTypesPerDataset in types/index.d.ts:

  interface ChartDatasetProperties<TType extends ChartType, TData> {

to

  interface ChartDatasetPropertiesCustomTypesPerDataset<TType extends ChartType, TData> {

It seems to work as expected after making this change.

[theDanielJLewis]

Any updates on fixing this in core?

I get this problem when I simply declare the options in options.plugins.datalabels.