-
Notifications
You must be signed in to change notification settings - Fork 23
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Clickable bars or points #29
Comments
Hi @nrocco, I have made a new release today (1.1.29) that has the ability to select a bar, here is a simple example on how to use it: <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> Don't forget to add vue3-charts components if you don't import them: import Vue3Charts from 'vue3-charts'
....
app.use(Vue3Charts) |
@ghalex Nice! I can confirm that the new click functionality from Instead of Tips for others reading this, if you want the mouse cursor to change to a pointer (similar to
I will close this issue. |
Let me start by saying that this is an awesome charting library. Thanks for sharing it!
I have a Bar chart and I wish to make the bars clickable so I can execute some logic. I understand the basics of how to add custom layers.
Could you give some pointers on how to make Bars (or Points in a Line graph) clickable?
I can contribute the result as an example to https://vue3charts.org/ if that helps
The text was updated successfully, but these errors were encountered: