How to create an event to get the clicked data of the graph

[ricardohernandez]

chartEvents: { 'click': () => { const selection = ???? }

in old versions i see that "ref" works like ->this.$refs.gchart.getSelection(), but not works now. any help?

[Jan-Heussner]

This works for me: this.$refs.gchart.chartObject.getSelection()

[UptimizeNL]

Unfortunately this doesn't seem to work (anymore). I'm using Vue3 and version 1.1.0 of vue-google-charts. It's impossible to get the current selection of a chart. chartObject doesn't seem to exist anymore?

[luukvr]

Found a workaround for vue 3, if you use the @ready you can receive a proxy to the chartObject

<GChart :data="data" :options="options" :events="chartEvents" @ready="setupChart" type="PieChart" />

chartEvents: { onmouseover: this.setSelection, ready: () => { this.setSelection({ row: 0, column: null }); }, },

setupChart(chartObject) { this.chart = chartObject; }, setSelection(object) { if (object !== null) { this.chart.setSelection([object]); } },

[gregoirepuget]

I don't know how to use click event with Nuxt 3. If someone can help. Thank you.

[Freekbron]

Use the select event name:

<template>
  <GChart :events="chartEvents" @ready="(chartWrapper) => (chart = chartWrapper)" />
</template>
<script lang="ts" setup>
const chart = ref();
const chartEvents = {
  select: () => {
    // Get the selected key
    const selectionKey = chart.value.getSelection()[0];
  },
};
</script>

The GoogleVizEvents type seems to be wrong for the events prop. But it works.