How to get data from clicked items in the Chart.js extension?

Ask us anything
1

Hello, I have several chart components (Bars, Donuts, Pie, etc) with the right data displayed. I’m looking to do an Onclick event that can pass the data clicked to a variable. For example, I have a Pie or Bar with attributes: Active (6 items) and Pending (12 items), if the user clicked on the corresponding portion of the pie, I want to store that into a variable. Is this even possible with this extension?

I searched the community and the online documentation to no avail. I did stumble on this Interactions | Chart.js but not sure where the code would be implemented.

Thank you.

1 Like
2

Hi, sorry its not a native feature. Please submit a feature request so we can add it in the next version :slight_smile:

3

Is this feature available already?

4

Is there a way to implement these features through javascript using the chart.js library? Is there an documentation on how to expand on the functionality with custom javascript?

5

i would imagine you would use the on chart click method

Screenshot 2024-01-13 at 7.15.47 AM
Screenshot 2024-01-13 at 7.15.47 AM1820×1672 273 KB

so if you clicked on Active, you’l get that as the label, plus it’s value, in the points array

1 Like
6

WeWeb definitely should implement some sort of unique identifier at the very least. But I try to stay as far as possible from charts in WeWeb, for now I percieve it as very limiting, might be wrong tho.

I haven’t really seen any nice charts done in WeWeb yet, so yeah, as a finance student, red flag :joy:

2 Likes
7

You haven’t seen my heatmap :wink:

It’s a mapbox thing. Nvm

1 Like
8

Hi, we implemented this feature, we provide the on click trigger event with the related data points

1 Like
9

What do you mean ? How it would help here ?

I’ve seen many, but you need to dig a little bit on the documentation if you want to do fancy stuff with the options.

Here two videos perfect to start playing with chartjs in WeWeb

10

Any examples of how to filter results, similar to what is done in PowerBi with slicers? I think getting the charts to filter based on a drop down list would be easy enought to implement since this would be changing the input data object array into the charts.

What I’m not sure how to do, is how to filter a data table based on a click event on a chart, for example, I have a pie chart, and when I click on a certain segment, for example, “SUV Sales” rather than “Sedan Sales” a related table changes from showing all car sales to just showing SUV car sales.

I think this is what jaredgibb might be after, a way to grab that onclick event, then use that data in a javascript action to filter a related table or potentially create anouther action like a hyper link to a new page.

1 Like
11

Indeed, it is also what I am after.