Vue-chartjs: onClick event in Pie chart

[DavidSotoA]

Hi, I'm trying to get the click event when the user click in a pie chart, I try with this code, but I can't get the chart instance in the line "this.$data._chart.getElementsAtEvent(evt)", because this.$data is undefined.

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

export default {
  props: ['data', 'title'],

  data() {
      return {
          options: {
            responsive: true, 
            maintainAspectRatio: false,

            title: {
                display: true,
                text: this.title,
                fontSize: 18,
                fontFamily: 'Zil Semi Slab',
                padding: 20
            }

        }
      }
  },
  extends: Pie,

  mounted () {
    this.renderChart(this.data, this.options);

    this.$refs.canvas.onclick = function(evt) {
        this.$data._chart.getElementsAtEvent(evt);
    }

  }
}

</script>

[f-k-z]

Probably a scope issue. Anyway, instead of using this.$refs.canvas.onclick you should use the onClick function provided by chartjs, and use a temp variable to target one of your custom method:

var _this = this;
var options = {
    onClick: function(evt) {
        _this.myCustomMethod(evt);
    }
};
this.renderChart(this.data, this.options);

[DavidSotoA]

Yes, I resolved this with the onClick function. Thank you.

[deylyn]

Probably a scope issue. Anyway, instead of using this.$refs.canvas.onclick you should use the onClick function provided by chartjs, and use a temp variable to target one of your custom method:

var _this = this;
var options = {
  onClick: function(evt) {
      _this.myCustomMethod(evt);
  }
};
this.renderChart(this.data, this.options);

esto no me funciona