CODEWITHSUNDEEP
vue.jspluginsannotationschart.js
Jonathan Chen
Jonathan Chen

Reputation: 1

Adding a chart-js plugin to vue-chart-js

I'm trying to add a chartjs plugin called chartjs-plugin-annotation (https://github.com/chartjs/chartjs-plugin-annotation) to my vue-chart js project. In my BarChart.vue file, I first imported the chartjs annotation plugin

<script>
import { Bar, mixins } from "vue-chartjs";
import chartjsPluginAnnotation from "chartjs-plugin-annotation";
const { reactiveProp } = mixins;

export default {
  extends: Bar,
  mixins: [reactiveProp],
  plugins: {
    annotation: {
      drawTime: "afterDatasetsDraw",
      events: ["click"],
      dblClickSpeed: 350,
      annotations: [
        {
          drawTime: "afterDraw",
          id: "a-line-1",
          type: "line",
          mode: "horizontal",
          scaleID: "y-axis-0",
          value: "25",
          borderColor: "red",
          borderWidth: 2,
          onClick: function (e) {
            // `this` is bound to the annotation element
          },
        },
      ],
    },
  },
  props: {
    options: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    // add plugin
    this.addPlugin([chartjsPluginAnnotation]);
    this.renderChart(this.chartData, this.options);
  },
  watch: {
    options() {
      this.renderChart(this.chartData, this.options);
    },
  },
};
</script>

I added the plugin under mounted() this.addPlugin([chartjsPluginAnnotation]);, before rendering the chart. Am I adding the config options to my chart correctly as at the plugins : ?

I've installed the plugin successfully, using npm install chartjs-plugin-annotation --save. I refreshed my app on my local but there's no annotation plugin added to the chart. What am I supposed to fill up in the onClick: function (e)? What am I still missing? I apologise in advance because I'm really new to this framework.

Upvotes: 0

Views: 3052

Answers (2)

kenai37
kenai37

Reputation: 1

https://stackoverflow.com/a/65486537/7165219

import chartjsPluginAnnotation from "chartjs-plugin-annotation";

And:

  mounted() {
    Chart.plugins.register(chartjsPluginAnnotation);
    this.addPlugin(chartjsPluginAnnotation);
    this.renderChart(this.chartData, this.options);
  }

Upvotes: 0

Asen Georgiev
Asen Georgiev

Reputation: 43

Here's how your options object should look like:

{
  ...
  annotation: {
    annotations: [
      {<your annotation object code here>}
    ],
  },
  ...
}

Next, you've correctly identified that you should use the addPluing() method, just make sure to use it like so

// in imports
import SomePlugin from "..."

// in mounted
this.addPlugin(SomePlugin);

Upvotes: 1

Related Questions