Reputation: 1093
This is my chart component and I want to handle events on labels I define in data. I would like to show the tooltip with bar data when I hover on a label.
<template>
<Bar :data="data" :options="options" />
</template>
<script setup>
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
BarElement,
CategoryScale,
LinearScale
} from 'chart.js'
import { Bar } from 'vue-chartjs'
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
export const data = {
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
}
]
}
export const options = {
responsive: true,
maintainAspectRatio: false
}
</script>
Upvotes: 0
Views: 60