onDrag, onDragStart, and onDragEnd not called when used with react-chartjs-2

[ErikWittern]

Hi there!

I am trying to use chartjs-plugin-dragdata in combination with react-chartjs-2. My setup is as follows:

import { Radar } from 'react-chartjs-2';
import 'chartjs-plugin-dragdata';

const data = {
  labels: ['Thing 1', 'Thing 2', 'Thing 3', 'Thing 4', 'Thing 5'],
  datasets: [
    {
      label: 'Weights',
      data: [50, 50, 50, 50, 50],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255, 99, 132, 1)',
      borderWidth: 1,
    },
  ],
};

const options = {
  scales: {
    r: {
      angleLines: {
        display: false,
      },
      min: 0,
      max: 100,
      stepSize: 1,
    },
  },

  plugins: {
    dragData: {
      magnet: {
        to: (value) => Math.round(value / 10) * 10,
      },
      onDrag: function (e, datasetIndex, index, value) {
        console.log(e, datasetIndex, index, value);
      },
      onDragStart: function (e, element) {
        console.log(e, element);
      },
      onDragEnd: function (e, datasetIndex, index, value) {
        console.log(e, datasetIndex, index, value);
      },
    },
  },
};

export function RadarChart() {
  return <Radar data={data} options={options} type="radar" />;
}

With that setup, the radar chart is rendered as expected, and I am able to drag its points around quite beautifully. However, the handlers onDrag, onDragStart, and onDragEnd are never called (i.e., there is no console output in the browser).

This could possibly also be an issue of react-chartjs-2 - or maybe I am doing something obviously wrong?

[ErikWittern]

Retrying actually resolved this issue, things are now working with the above setup, so I am closing this.

Here is what I think went wrong: I am using WebPack with hot module replacement, and did not implement onDrag etc. callbacks when initially loading the page. The code changes to introduce onDrag etc. were then not properly reflected due to the hot module replacement, and only started working after a hard reload of the page.