CODEWITHSUNDEEP
vue-chartjs
user1602496
user1602496

Reputation: 31

Attach a custom plugin to Vue-Chart

We need to attach a custom plugin to vue-chart. Please guide us how to implement on the same

import { Line, mixins } from 'vue-chartjs'
export default {
    namespaced: true,
    extends: Line,
    props: ['chartData', 'options'],
    mounted() {
        this.renderChart(this.chartData, this.chartData.options)
    }
}

This is how we are using the line chart of Vue-chart. How to attach the plugin here

https://blog.larapulse.com/javascript/creating-chart-js-plugins We want to try this. But since we are using vue-chart which internally uses chart.js. Need some help to attach the plugin. please guide us

I want to apply some background color to the chart for one specific column in the chart

Upvotes: 3

Views: 9285

Answers (3)

kenai37
kenai37

Reputation: 1

import chartjsPluginAnnotation from "chartjs-plugin-annotation";

And:

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

Upvotes: 0

Bagaskara
Bagaskara

Reputation: 891

vue-chart-js provide method to attach plugins. Use this way:

import the plugin

import ChartDataLabels from 'chartjs-plugin-datalabels';

then, call addPlugin in mounted

 mounted() {
    this.addPlugin(ChartDataLabels);
    this.renderChart(
      this.chartData,
      this.options,
    );
 }

Below is PieChart.vue script in case you create pie chart :

<script>
import { Pie, mixins } from 'vue-chartjs';
import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.plugins.unregister(ChartDataLabels);

const { reactiveProp } = mixins;

export default {
  extends: Pie,
  mixins: [reactiveProp],
  props: {
    options: {
      type: Object,
      default: null,
    },
  },

  mounted() {
    this.addPlugin(ChartDataLabels);
    this.renderChart(
      this.chartData,
      this.options,
    );
  },
};
</script>

Upvotes: 5

tmsss
tmsss

Reputation: 2129

Using the annotation plugin for Chart.js as example, you can use the addPlugin function to attach it:

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

export default {
    namespaced: true,
    extends: Line,
    props: ['chartData', 'options'],
    mounted() {
        //Arguments is an Array of Plugins (https://vue-chartjs.org/api/#addplugin)
        this.addPlugin([chartjsPluginAnnotation]),
        this.renderChart(this.chartData, this.chartData.options)
    }
}

After this just pass the plugin's options on your component as usual. In this case, if you wanted to draw a vertical line, it would be something like this:

   computed: {
        chart() {
          return {
            chartData: {
              labels: this.data.labels,
              datasets: [
                {
                  label: "Score",
                  data: this.data.data
                }
              ],
            options: {
              annotation: {
                annotations: [
                  {
                    type: "line",
                    mode: "vertical",
                    scaleID: "x-axis-0",
                    borderColor: "#4ecca3",
                    value: parseInt(this.data.line),
                    borderDash: [4, 4],
                    label: {
                      content: this.data.line,
                      enabled: true,
                      position: "top",
                      xAdjust: 15,
                      backgroundColor: '#4ecca3',
                      fontSize: 10,
                    }
                  }
                ]
              }
            },
            }
          };
        }

Upvotes: 1

Related Questions