Improve Tooltip with multiple series and group/stacked data

[techniq]

Reference:

• Bar Chart features / examples #21 (comment)
• discussion

[samal-rasmussen]

I'm trying to get highlight points on multiple series, but am having no luck. The line chart examples only show a single highligt point and only one series data in the tooltip. The stacked area chart is able to show multiple points and series data in the tooltip. Though it only shows two at a time...

I've tried to pass in a flatData prop with the [12,21, data: data] shape to the line chart, but that just borkes it.

I hate to link out to a different library, but this one has an example of more or less what I'm looking for:
https://apexcharts.com/javascript-chart-demos/line-charts/dashed/

[techniq]

@samal-rasmussen Is this what you are looking for?

CleanShot.2024-06-28.at.11.09.58.mp4

Fixed via #213 and deployed as 0.43.2

[samal-rasmussen]

Yes multiple point highlights just like that, but on a multiple series line chart instead of stacked area chart.

[techniq]

@samal-rasmussen 0.43.3 includes PR #215 which improves Highlight for non-stack array accessors (i.e. series) when displaying points. I currently need to add a $key property to expose the series value key, but hoping a cleaner approach presents itself.

[techniq]

@samal-rasmussen Actually I think I came up with a cleaner approach by allowing you to pass an x or y override to <Highlight> (similar to Area) and render a separate <Highlight y={...} points> for each series).

Available in 0.43.4 and take a look at the "Multiple series (using overrides)" example

[samal-rasmussen]

Sean you are an absolute madman. That works perfectly. Tried on 0.43.5.

[techniq]

Ha, glad it works for you :)

[techniq]

Better support for tooltips with stacked and/or grouped bar charts are coming in the Simplified Charts PR.

CleanShot.2024-08-28.at.00.50.11.mp4