# Get data from click chart item using ChartJS

**URL:** <https://community.weweb.io/t/get-data-from-click-chart-item-using-chartjs/4671>\
**Category:** How do I?\
**Created:** [September 29, 2023, 8:05pm UTC](https://community.weweb.io/t/get-data-from-click-chart-item-using-chartjs/4671 "2023-09-29T20:05:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sampannemans](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@sampannemans](https://community.weweb.io/u/sampannemans)\
**Post date:** [September 29, 2023, 8:05pm UTC](https://community.weweb.io/t/get-data-from-click-chart-item-using-chartjs/4671/1 "2023-09-29T20:05:55Z")

</div>

Hello!

I am currently building a dynamic dashboard featuring multiple charts. The primary objective is to enable users to interact with these charts, specifically by clicking on specific chart elements (such as segments of a pie chart). Upon clicking, I aim to implement a filtering mechanism, where the dashboard content adjusts based on the selected chart item.

To achieve this interactivity, my initial plan was to capture the clicked chart item’s data and store it in a variable. Then, I could use this variable to trigger a new API request for the updated data. However, I can’t figure outhow to capture the precise data item that was clicked on the chart.

Has anyone done something like this before and could give me some pointers? I’d really appreciate any help or tips you can share.

Thanks!

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [September 29, 2023, 8:27pm UTC](https://community.weweb.io/t/get-data-from-click-chart-item-using-chartjs/4671/2 "2023-09-29T20:27:19Z")

</div>

Try checking this out.

> **[Interactions | Chart.js](https://www.chartjs.org/docs/latest/configuration/interactions.html)**
>
> Open source HTML5 Charts for your website

---

<div class="post-metadata">

**Author:** ![benFortunato](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@benFortunato](https://community.weweb.io/u/benFortunato)\
**Post date:** [February 6, 2024, 12:32pm UTC](https://community.weweb.io/t/get-data-from-click-chart-item-using-chartjs/4671/3 "2024-02-06T12:32:02Z")

</div>

I assume that since this is wrapped inside Vue I would need to read through the Vue wrapper documentation. [GitHub - apertureless/vue-chartjs: 📊 Vue.js wrapper for Chart.js](https://github.com/apertureless/vue-chartjs/) and then potentially fork the chart WeWeb object ([weweb-assets · GitHub](https://github.com/weweb-assets?q=chart&type=all&language=&sort=)) and add the interactions I want as emits?

Or is there a simpler way to do this with just plain javascript? I’m still learning a lot about web development so I’m trying to figure out what the approach would be.

---

<div class="post-metadata">

**Author:** ![sampannemans](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@sampannemans](https://community.weweb.io/u/sampannemans)\
**Post date:** [February 6, 2024, 2:30pm UTC](https://community.weweb.io/t/get-data-from-click-chart-item-using-chartjs/4671/4 "2024-02-06T14:30:49Z")

</div>

WeWeb actually released a an update in Nov 2023 that solved this: click event on charts.  
See [🎭 Masked input, click event on charts, Xano branches](https://www.weweb.io/changelog/2023-11-15)

I tested it briefly and it seems to do the job.

---

<div class="post-metadata">

**Author:** ![benFortunato](https://avatars.discourse-cdn.com/v4/letter/b/6de8d8/32.png) [@benFortunato](https://community.weweb.io/u/benFortunato)\
**Post date:** [February 6, 2024, 2:42pm UTC](https://community.weweb.io/t/get-data-from-click-chart-item-using-chartjs/4671/5 "2024-02-06T14:42:03Z")

</div>

Awesome! Will just jump into this and play around with this. . . . the lack of click events was holding me back.