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"),
},
};