'dragData' Not Recognized as Options Property in Angular

[rkp8]

'dragData' Option Not Recognized:

Using Chart.js 2.9.3 in Angular. Imported plugin: import 'chartjs-plugin-dragdata' However, dragData is not recognized as a chart option.

Receiving the following error: index.d.ts(278, 9): The expected type comes from property 'options' which is declared here on type 'ChartConfiguration'

Please let me know how to fix this issue.

[rkp8]

Screenshot:

[chrispahm]

Hey @rkp8 👋

I'm not a TypeScript expert, but I'd guess you need to extend the ChartOptions interface and use the extended interface instead of the original one when creating the chart instance.

interface ChartOptionsDragData extends ChartOptions {
  dragData: boolean;
  // ToDo: add the remaining properties auch as 'onDragStart' etc.
}

As this is more of a TypeScript related question rather than a bug in this plugin, I'd recommend you to ask this question on StackOverflow with the corresponding tags (e.g. chart.js, plugin, and TypeScript)

[chrispahm]

Just as a reference: Here's a complete example using Angular (and presumably TypeScript) https://plnkr.co/edit/s2aPrPExAmp8gnQc?open=lib%2Fapp.ts&deferRun=1&preview

[rkp8]

Hi Chris, I extended the chartOptions interface and it worked perfectly. Thank you so much.

[kemalk89]

For chartjs version 3 I did this: export type MyChartOptions = ChartOptions & { plugins: { dragData: { round: number; showTooltip: boolean; }; }; };