Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
stockiNail opened this issue May 11, 2023 · 14 comments · Fixed by #894
Labels
bug types Typescript type changes

Comments

@stockiNail
Copy link
Collaborator

stockiNail commented May 11, 2023

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 #877 (comment)

@stockiNail stockiNail changed the title Object literal may only specify known properties, and 'annotation' does not exist in type '_DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry, keyof ChartTypeRegistry>>'. Object literal may only specify known properties, and 'annotation' does not exist in specified type May 11, 2023
@rfrancois
Copy link

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
Copy link
Collaborator Author

stockiNail commented May 11, 2023

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

@rfrancois
Copy link

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
Copy link
Collaborator Author

@rfrancois already fixed, See PR #885. We are evaluating how to fix the version 3.0.0 link.
Use "Development(master)' version in the meanwhile

@rfrancois
Copy link

Great thanks

@stockiNail stockiNail added the bug label May 11, 2023
@wizard982
Copy link

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
Copy link
Collaborator Author

stockiNail commented May 15, 2023

@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
Copy link
Collaborator Author

Created issue in Chart.js repo: chartjs/Chart.js#11288

@ghost
Copy link

ghost commented May 15, 2023

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

@stockiNail
Copy link
Collaborator Author

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
Copy link

csisy commented May 16, 2023

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
Copy link
Collaborator Author

stockiNail commented May 24, 2023

@wizard982 @csisy @rfrancois See comment chartjs/Chart.js#11288 (comment)
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
Copy link
Collaborator Author

stockiNail commented May 24, 2023

@wizard982 @csisy @rfrancois See PR in Chart,js chartjs/Chart.js#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
Copy link
Collaborator Author

PR chartjs/Chart.js#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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug types Typescript type changes
Projects
None yet
4 participants