Plugins not working

[anko2020]

Hi all,

first of all I have to confess that I am rather new to javascript/Vue3, so this issue might be caused by some not very well understood fundamentals.

I have successfully created a LineChart Vue component using vue-chart-3 and Vue3. Data is plotted correctly and the chart can be adjusted by using an "options" dict:

<template>
     <LineChart :chartData="chartData" :options="options" />
</template>

As a next step I have tried to add a plugin (chartjs-plugin-zoom). To this end, I have added this section:

<script>
 ....
  import { Chart, registerables } from "chart.js";
  import { LineChart } from "vue-chart-3";
  import zoomPlugin from "chartjs-plugin-zoom";

  Chart.register(...registerables, zoomPlugin);
 ...
</script>

and from the options dict I have modified the key "plugins":

options: {
        responsive: true,
        plugins: {
          legend: {
            position: "bottom",
          },
          title: {
            display: true,
            text: "Test Chart",
          },
          zoom: {
            wheel: {
              enabled: true,
            },
            pinch: {
              enabled: true,
            },
            mode: "xy",
          },
        },
      },

However, there is no zoom functionality ...

Any idea what the issue might be?

Thanks a lot & Cheers

[Victor Garcia]

Hi! No problem at all i'm happy you're using my lib! :)

I checked your problem and it must comes from your options, you missed on level of zoom:

The doc indicate that the zoom plugin option looks like this :

options: {
    plugins: {
      zoom: {
        zoom: {
          wheel: {
            enabled: true,
          },
        }
      }
    }
  }

So you just have to add 1 level of zoom :D

Demo: https://codesandbox.io/s/vue-chart-3-vue-2-mw54f?file=/src/App.vue

[anko2020]

Hey Victor,

that was exactly the issue! 🙈

Thank you !!!

Cheers