Encountering issues with using the 'dragData' plugin in Chart.js 2.9.3 within an Angular environment: https://github.com/chrispahm/chartjs-plugin-dragdata
After importing the plugin: chartjs-plugin-dragdata, I added dragdata to the options as shown below:
this.comboChart1 = new Chart("bar1", {
type: "bar",
options: {
dragData: true,
onDragStart: function (e) {
},
onDrag: function (e, datasetIndex, index, value) {
// console.log(datasetIndex, index, value)
},
onDragEnd: function (e, datasetIndex, index, value) {
// console.log(datasetIndex, index, value)
},
//Set Formatting
},
Unfortunately, 'dragData' is not being recognized as a valid chart option. The error message received is as follows:
Type '{ plugins: { zoom: { pan: { enabled: true; mode: string; sensitivity: number; }; zoom: { enabled: true; mode: string; sensitivity: number; }; }; }; responsive: true; title: { display: true; text: any; position: "top"; fontSize: number; }; ... 6 more ...; onDragEnd: (e: any, datasetIndex: any, index: any, value: any)...' is not assignable to type 'ChartOptions'.
Object literal may only specify known properties, and 'dragData' does not exist in type 'ChartOptions'.ts(2322)
index.d.ts(278, 9): The expected type comes from property 'options' which is declared here on type 'ChartConfiguration'
Receiving the following error:
index.d.ts(278, 9): The expected type comes from property 'options' which is declared here on type 'ChartConfiguration'
Update: Successfully resolved the issue by taking two steps: 1. Downgrading the plugin to version 1.1.13 for compatibility with Chart.js 2.9.3. 2. Extending the chartOptions interface. After adding the missing properties: dragdata, ondragstart, ondrag, ondragend, the plugin started functioning correctly with the provided options code.