Get data from click chart item using ChartJS

Ask us anything How do I?
1

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!

2

Try checking this out.

3

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 and then potentially fork the chart WeWeb object (weweb-assets · GitHub) 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.

4

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

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

1 Like
5

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

1 Like