Vue-chartjs: Adding annotation plugin functionality

[dragosh090]

Hello,

I'm working on a project that displays a line chart on one of its pages. I've implemented the whole thing using chart.js and one of its plugins chartjs-plugin-annotation.js. Now I want to make the same functionality using vue.js and vue-chartjs but I cannot find anything about how to add the plugin's functionality.

Is there an easy way to include this on my end or do you think you will offer some kind of support for plugins in the near future?

Thank you!

[apertureless]

Well, vue-chartjs is only a small wrapper / scaffold kind of lib. It's main benefit is, that is abstracts some of the Chart.js stuff, so you can pull it in and use it without dealing with the creating of the chart instance, creating the canvas etc.

So if you're experienced with Chart.js and Vue I don't know if you would benefit much from it. Because you can create and implement the charts by your own.

However, I don't worked with Chart.js plugins, but have you tried just... to use them? :D

As far as I can see, you can install the chartjs-plugin-annotation plugin over npm. So you should be able to use it with vue-chartjs. I don't know if you have to register the plugin somehow to work with Chart.js, but in your Chart component you should be able to import or require() it.

You have access to all you need In your Chart component where you extend() the basechart, you have access to the chart instance over this._chart and you have access to the chartjs global over Chart

<script>
import { Line } from 'vue-chartjs'

export default Line.extend({
  props: ['options', 'chartData'],
  mounted () {
    this.renderChart(this.chartData, {
       scales: {
        xAxes: [{
          type: 'linear',
          position: 'bottom'
        }]
      }
    })

    console.log(this._chart) // Instace created with new Chart({})
    console.log(Chart) // Chart.js global Object: import Chart from 'Chart.js'
  }
})

</script>

[apertureless]

Close due to inactivity

[nbsynch]

I just want to confirm you can just import the annotation plugin and it works. The below code doesn't have any issues.

import { Line, mixins } from "vue-chartjs";
import chartjsPluginAnnotation from "chartjs-plugin-annotation";

const { reactiveProp } = mixins;

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ["options"],
  mounted() {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options);
  }
};

[NicksonYap]

@nbsynch that worked :D

[longrunningprocess]

in case you need to get past your linter:

// eslint-disable-next-line
import chartjsPluginAnnotation from "chartjs-plugin-annotation";

[vcavallo]

I've been going crazy reading all the issues in the annotation repo - when all along I simply wasn't importing the plugin in my chart component 🤦‍♂️ thanks @nbsynch !!

[gillesdeblock]

in case you need to get past your linter:

// eslint-disable-next-line
import chartjsPluginAnnotation from "chartjs-plugin-annotation";

There is actually no need to disable the linter for that line. It's complaining about an unused variable, so the following will work just fine:

import from 'chartjs-plugin-annotation';

Since you're not declaring any variables here, the linter won't complain. 😉

[longrunningprocess]

I think you could simply remove the from altogether

[QuachDuy]

import chartjsPluginAnnotation from "chartjs-plugin-annotation";
And:

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