Object literal may only specify known properties, and 'annotation' does not exist in specified type

[stockiNail]

I tried version 3.0.0 and I have a new error : Object literal may only specify known properties, and 'annotation' does not exist in type '_DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry, keyof ChartTypeRegistry>>'.

With this code :

import { Chart } from "chart.js/auto";
import * as moment from 'moment';
import zoomPlugin from 'chartjs-plugin-zoom';
import annotationPlugin from 'chartjs-plugin-annotation';
import 'chartjs-adapter-moment';

Chart.register(annotationPlugin)

...

new Chart(chartRef.nativeElement, {
  type: 'bar',
  plugins: [zoomPlugin],
  data: {
	datasets: datasets
  },
  options: {
	responsive: true,
	maintainAspectRatio: false,
	plugins: {
	  zoom: {
		zoom: {
		  drag: {
			enabled: true
		  },
		  mode: 'x',
		},
	  },
	  annotation: { } // If I comment this line, error disappears. If I put content inside this object to draw my annotations, still have the error
	}
  },
})

My versions : "chart.js": "^4.3.0", "chartjs-adapter-moment": "^1.0.1", "chartjs-plugin-annotation": "^3.0.0", "chartjs-plugin-zoom": "^2.0.1",

If I remove zoom plugin, it works though. But I would like both plugins. Any suggestion ?

Originally posted by @rfrancois in https://github.com/chartjs/chartjs-plugin-annotation/issues/877#issuecomment-1543957021

[rfrancois]

Thanks @stockiNail for your quick reply.

My quick & dirty workaround :

const plugins: any = {
  zoom: { ... }
  annotation: { ... } 
}

new Chart(chartRef.nativeElement, {
  type: 'bar',
  plugins: [zoomPlugin],
  data: {
	datasets: datasets
  },
  options: {
	responsive: true,
	maintainAspectRatio: false,
	plugins: plugins
  },
})

This way everything works...

[stockiNail]

good! Anyway I want to understand where we should fix it (chartjs or plugins) because that's annoying me....

[rfrancois]

By the way, I'm sorry to ask here if it's not the right place, but I guess it's related: Since today, graphs aren't displaying on the documentation https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/box/basic.html and there are error messages in the console.

[stockiNail]

@rfrancois already fixed, See PR https://github.com/chartjs/chartjs-plugin-annotation/pull/885. We are evaluating how to fix the version 3.0.0 link. Use "Development(master)' version in the meanwhile

[rfrancois]

Great thanks

[wizard982]

Hello guys

I have the same error, even if I use only the Annotation plugin and totally disable the zoom plugin. At the moment I use the zoom plugin and I'm interested in the Annotation plugin to draw some standard deviation over my bar chart.

I'm using Angular 15 and "ng2-charts": "^4.1.1" with these other libraries

• "chart.js": "4.2.0",
• "chartjs-adapter-dayjs-4": "^1.0.4",
• "chartjs-plugin-annotation": "3.0.0",
• "chartjs-plugin-datalabels": "2.2.0",
• "chartjs-plugin-deferred": "2.0.0",
• "chartjs-plugin-zoom": "2.0.0",

I tried the proposed workaround but it doesn't work on my configuration, the error remains. I tried also another way to glue up the annotation property to the chart options object: Object.defineProperty(this.wPLineChartOptions.plugins, 'annotation', { annotations: [ { type: 'line', borderColor: 'black', borderWidth: 1, label: { backgroundColor: 'red', content: 'deviation', display: false }, drawTime: 'afterDatasetsDraw', xMax: 'Normal', xMin: 'Normal', xScaleID: 'x', yMax: 65, yMin: 55, yScaleID: 'y' } ] } as any); doing so I can see the annotation property on the object (in the console), but the annotation is undefined.

Some idea about that?

[stockiNail]

@wizard982 I did a test importing annotation, zoom and datalabels, using the workaround suggested by @rfrancois and it works (defining the plugins options separately). I have a sample project with angular (not ng-charts). Anyway I did additional tests and the issue is not depending on annotation plugin but about the module augmentation way used by chart.js to define plugins. I think we should submit an issue to chart.js repo, as soon as I have time.

[stockiNail]

Created issue in Chart.js repo: https://github.com/chartjs/Chart.js/issues/11288

[SebastiaanSafeguard]

What happens if the same type changes are applied to the zoom plugin? The PR in that repository is still open.

[stockiNail]

What happens if the same type changes are applied to the zoom plugin? The PR in that repository is still open.

I have tested changing the types of zoom plugin (setting the default type) in node_modules folder. This issue is occurring anyway.

[csisy]

Tried the same thing as @stockiNail can confirm, it does not solve the issue.

As an additional (but maybe trivial) information: if I import the annotation plugins first, the zoom plugin type is missing, but if I import the zoom plugin first, the annotation plugin type is missing.

Will keep an eye on chartjs/Chart.js#11288 but I'm not sure that it will solve the problem.

[stockiNail]

@wizard982 @csisy @rfrancois See comment https://github.com/chartjs/Chart.js/issues/11288#issuecomment-1561777505 It sounds the issue is in Chart.js. I am waiting for a feedback from maintainers to submit a PR to fix it. I'll keep u updated.

[stockiNail]

@wizard982 @csisy @rfrancois See PR in Chart,js https://github.com/chartjs/Chart.js/pull/11309.

If you are blocked, as workaround, waiting for PR approval and merging in Chart,js, you could change the following file in your project:

node_modules/chart.js/dist/types.d.ts

adding PluginOptionsByType in the export at line 9 as following:

.......
/**
 * Explicitly re-exporting to resolve the ambiguity.
 */
export { PluginOptionsByType, BarController, BubbleController, DoughnutController,
......

[stockiNail]

PR https://github.com/chartjs/Chart.js/pull/11309 in Chart,js has been merged. This bug will be fixed by next Chart.js version. I'm going to close this issue when new Chart,js version will be published.