Selected Points is not populated after clicking a line chart

💬 App Building
1

  • Goal: Send a user to a table containing the data of a line chart (drill down) when clicking on it.

  • Steps:

  1. Create a Line Chart
  2. Create a Script that runs on Select and console.log the `chart.selectedPoints``
  3. Selected points will print empty (or see them on state) when clicking a point on the Line Chart.

  • Details:

  • Using Charts V2, Line Chart.

  • Data is populating from a simple SQL query.

  • Screenshots:

    image
    image2178×1288 239 KB

    image

2

Hello @victorct_69152, welcome to the Retool Community!

Here’s your solution: Use the onPointClick event handler. This event directly provides the data of the clicked point, making it an ideal choice for implementing drill-down actions.

2 Likes
3

There is no such thing as onPointClick event handler in the actions dropdown

4

Hello @victorct_69152

Apologies for the confusion earlier regarding the onPointClick event handler. I have found that using lineChart.series works perfectly. Below is a JavaScript query that I created

let formattedData = Object.values(lineChart1.series).map((series) => {
  return series.xData.map((x, pointIndex) => ({
    dataset: series.name,
    group: series.name,
    indices: [pointIndex],
    x: x,                          
    y: series.yData[pointIndex],  
    value: series.yData[pointIndex] 
  }));
}).flat();

return formattedData;

This query, when triggered in the line chart event handler, works as expected and produces the desired result.

image
image1361×297 39.9 KB

Thank You.

2 Likes
6

Hi there,

I will report this bug to our team for a fix :pray:

In case it relates to this use case, I wanted to add that we also have a feature request on file to add a utility function for setting selected points

2 Likes
7

Hey @Tess! Any updates on adding a utility function for setting selected points?

8

Hi @sgodoshian,

Definitely something we want to add! Unfortunately, I don' t see that it has been picked up yet, so I'm not able to determine an eta

1 Like
9

@Tess

Would it be possible for you guys to open-source the built-in components? There's so many missing features in the revised Charts, I'd love to add some new features, but really don't want to start from zero.

1 Like
10

Hi @offpath,

Thanks for reaching out! Unfortunately, we don't have plans to open-source our built-in components :disappointed: I will be sure to pass along any specific feature requests though!

Some layout features that we haven't created natively can be implemented with the generic plotly json chart, but I haven't found a workaround for this particular request.

Totally get that the custom React component option is starting from 0 and may take extra work to maintain :slightly_frowning_face: I'll be sure to follow up here if I have an update

1 Like
11

I don't see how the code suggested by @WidleStudioLLP addresses this problem. Does anyone have a working workaround for this?

12

Curious to hear from other builders, but I'm not aware of a workaround, unfortunately :disappointed:

This request hasn't been prioritized internally yet, so I don't have an eta for a fix