Vue3 compability

[Mikolaj-Graja]

trafficstars

Events are not working on Vue3 (composition api)

Example:

const chartPlugins = [{
        id: 'mousedownCatcher',
        dragData: {
          round: 1,
          showTooltip: true,
          onDragStart: function (e, datasetIndex, index, value) {
            console.log(e)
          },
          onDrag: function (e, datasetIndex, index, value) {
            e.target.style.cursor = 'grabbing'
            console.log(e, datasetIndex, index, value)
          },
          onDragEnd: function (e, datasetIndex, index, value) {
            e.target.style.cursor = 'default'
            console.log(datasetIndex, index, value)
          },
        }
  }]

  const draggableChart = new Chart('draggableChart', {
        type: 'line',
        data: chartData,
        options: chartOptions,
        plugins: chartPlugins
  })

  + dragData: true on datasets in chartData

Result: no console logs, no changes in chart behaviour on click/ drag etc.

Plugin installed by npm

[chrispahm]

Hey @Mikolaj-Graja,

Thanks for raising an issue. As always, I'd need a reproducible example on jsFiddle / Codesandbox etc. before having a deeper look.

[bitbytebit1]

Can confirm I'm seeing the same issue: https://stackblitz.com/edit/nuxt-starter-2tb3jw?file=app.vue

[bitbytebit1]

Got it working: https://stackblitz.com/edit/nuxt-starter-2tb3jw?file=app.vue

[artus9033]

Since @bitbytebit1's last comment with MWE demonstrates that Vue works properly, I'm closing this issue.