Vue Chartjs click event example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
<div id="app">
  <h2>Pie Chart</h2>
  <div>{{ selectedData }}</div>
  <pie-chart @on-receive="update"></pie-chart>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

Vue

const PieChart = Vue.component('pie-chart', {
  extends: VueChartJs.Pie,
  data () {
  	return {
    	values: [40, 39, 10, 40]
    }
  },
  mounted () {
    this.renderChart({
      labels: ['Hello', 'World', 'Chart', 'Test'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: ['#f87979', '#ff0000', '#00ff00', '#0000ff'],
          data: this.values
        }
      ]
    }, {responsive: true, maintainAspectRatio: false, onClick:this.handle})
  },
  methods: {
  	handle (point, event) {
    	const item = event[0]
    	this.$emit('on-receive', {
      	index: item._index,
        backgroundColor: item._view.backgroundColor,
        value: this.values[item._index]
      })
    }
  }
})

new Vue({
  el: "#app",
  data () {
  	return {
    	selectedData: {}
    }
  },
  components: {
  	'pie-chart': PieChart
  },
  methods: {
  	update (data) {
    	this.selectedData = data
    }
  }
})