Chiara Ani
Chiara Ani

Reputation: 1093

How to handle event on data label in Vue Chart.js?

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.

my bar chart

<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>

Snippet: https://stackblitz.com/github/apertureless/vue-chartjs/tree/main/sandboxes/bar?file=src%2FchartConfig.ts

Upvotes: 0

Views: 60

Answers (0)

Related Questions