Clickable bars or points about vue3-charts HOT 2 CLOSED

<template>
<div class="flex">
    <Chart
      :size="{ width: 800, height: 400 }"
      :data="data"
      :axis="axis"
      :margin="margin"
      :direction="direction"
    >
      <template #layers>
        <Grid strokeDasharray="2,2" :center="false" />
        <HoverBar />
        <Bar
          :dataKeys="['name', 'avg']"
          :barStyle="{ fill: '#FC96c7' }"
          :barStyleSelected="{ fill: '#b1517f' }"
          :selectedBar="selectedBar"
          @bar-click="onBarClick"
        />
      </template>
    </Chart>
    <div v-if="selectedBar">
      <div>Selected bar index: {{selectedBar.idx}}</div>
      <div>Selected bar props: {{selectedBar.props}}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/runtime-core'
import * as mockup from '@/mockup'

export default defineComponent({
  setup() {
    const data = ref<any>(mockup.plByMonth)
    const margin = ref({
      left: 10,
      top: 10,
      right: 10,
      bottom: 10
    })


    const selectedBar = ref(null)
    function onBarClick(bar: any) {
      selectedBar.value = bar
    }

    return { data, margin, selectedBar, onBarClick }
  }
})
</script>

import Vue3Charts from 'vue3-charts'
....
app.use(Vue3Charts)