Chartjs-How to emit an event with vue-chartjs?

by

1👍

✅

1.first you create EventBus.js file
import Vue from ‘vue’;

export const EventBus = new Vue();

2.In your char.js file code like below

import { EventBus } from "../EventBus.js";
import { mixins, Line } from "vue-chartjs";
const { reactiveProp } = mixins;
export default {
  extends: Line, 
  mixins: [reactiveProp],
  props: ["options"],
  mounted() {
    const self = this;
    console.log(self);
    this.options.onClick = function (e, tooltipItems) {
      console.log(tooltipItems[0].__ob__); //.logged
      EventBus.$emit("sendIndex", tooltipItems[0]._index);
    };
    this.renderChart(this.chartData, this.options);
  },
};

  1. where you want to access your data in that file like below

    import { EventBus } from "../EventBus.js";
mounted() {

   EventBus.$on('sendIndex', data => {
      console.log(data)
     });

},

Leave a comment