Chartjs-Trying to get _index of clicked bar in ChartJS

by

0👍

✅

Unfortunately, the onClick event handler is poorly documented. You could try to define the data in a separate variable outside of the chart configuration. 

const data = [55, 68, 82, 48, 75, 45, 67];

Then, you can define the onClick event handler as follows:

options: {
   ...
   onClick: (event, item) => {
      const idx = chart.getElementAtEvent(event)[0]._index;
      console.log(data[idx]);
   }
}

const labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"];
const data = [55, 68, 82, 48, 75, 45, 67];

let chart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: labels,    
    datasets: [{
      label: "My First Dataset",
      data: data,
      backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
      borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    title: {
      display: false
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        gridLines: {
          color: "#989898"
        },
        ticks: {
          fontColor: "#989898",
          fontSize: 16,
          beginAtZero: true
        }
      }]
    },
    plugins: {
      datalabels: {
        anchor: 'center',
        font: {
          size: 16,
          weight: 'bold'
        },
        formatter: function(value, context) {
          return '$' + Number(value).toLocaleString();
        },
        color: 'white'
      }
    },
    onClick: (evt, item) => {
      const idx = chart.getElementAtEvent(event)[0]._index;
      console.log(data[idx]);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="myChart" height="80"></canvas>

0👍

Here is an example in Vue3 taken from their documentation using the ‘Events’ example.

Docs

<script>

import { ref } from 'vue'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
} from 'chart.js'
import {
  Chart,
  getDatasetAtEvent,
  getElementAtEvent,
  getElementsAtEvent
} from 'vue-chartjs'

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)

export default {
  name: 'App',
  components: {
    Chart
  },
  setup() {

    const chartRef = ref(null)

    const onClick = (event) => {
      const {
        value: { chart }
      } = chartRef

      if (!chart) {
        return
      }

      console.log(getDatasetAtEvent(chart, event))
      console.log(getElementAtEvent(chart, event))
      console.log(getElementsAtEvent(chart, event))
    }

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

  const options = {
    responsive: true,
    maintainAspectRatio: false
  }

    return {
      chartRef,
      onClick,
      data,
      options
    }
  }
}
</script>
<template>
  <Chart
    ref="chartRef"
    type="bar"
    :data="data"
    :options="options"
    @click="onClick"
  />
</template>

Leave a comment