Programmatically set active piece of Pie Data

[barrymichaeldoyle]

Is your feature request related to a problem? Please describe.
I have create a pie chart and I made my own custom legend component. By using onMouseEnter and onMouseLeave events on pieces of my Pie chart I'm able to highlight areas of my legend component. I.e. I hover over "Section A" in my pie and then the "Section A" item in my legend gets highlighted.

This is great, but I want to be able to do the inverse action to. I'd like to be able to hover over a legend item and make the corresponding piece of the pie active as well.

Describe the solution you'd like
I'd like the Pie component to accept a prop like activeId which if set will act as if that piece is being hovered on. This way instead of needing to hover over the pie itself, I can hover over my custom legend component and I can programmatically indicate that the corresponding piece if being hovered.

Describe alternatives you've considered
I've been looking around to work arounds, but couldn't find anything.

Additional context
Visual example:

When I hover over the piece of the pie I have it working as expected:

But when I hover over the legend I don't have a way to set the active piece in my pie:

[SebasQuirogaUCP]

Hey @barrymichaeldoyle , from an DX point of view I think users expect the whole feature as out-of-the-box.
I propose to add a new prop highlightLegends: boolean that when true highlights the Pie chart section and its corresponding legend as soon as hovering either one of them.
What do you think @plouc ?

[barrymichaeldoyle]

I would still expect a programmatic solution…

…

On Mon, 24 Jul 2023 at 15:29, SebasQuiroga ***@***.***> wrote: Hey @barrymichaeldoyle <https://github.com/barrymichaeldoyle> , from an UX point of view I think users expect the whole feature as *out-of-the-box*. I propose to add a new prop highlightLegends: boolean that when true highlights the Pie chart section and its corresponding legend as soon as hovering either one of them. What do you think @plouc <https://github.com/plouc> ? — Reply to this email directly, view it on GitHub <#2388 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABDVHNRQPDPJCA3DMTX6XXTXRZ2E3ANCNFSM6AAAAAA2N6ZVOU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[SebasQuirogaUCP]

I can help with it 🤓

[SebasQuirogaUCP]

@barrymichaeldoyle Could you share the code used to highlight the legends when hovering a Pie section please. I would like to recreate exactly your scenario as a reference point.

I would love to know what the community thinks about implementing this feature as either a programmatic solution or as an out-of-the-box prop to be set when desiring both Pie section and Legend highlights 🎙️

@plouc @ollwenjones @barrymichaeldoyle

[plouc]

Hi there!

First of all, sorry for the late reply 😅, I've been quite busy lately.

An out-of-the-box solution could be nice, but I think being able to control this programmatically should be the first thing to implement. This could cover other use cases, such as building some kind of story-telling app where you highlight certain arcs as you scroll. Also, it would allow users to implement custom legends, SVG based legends have quite a few limitations regarding layout/styling, so I think it's not that uncommon.

I'm currently looking into this and I plan to introduce 3 new props:

• activeId
• onActiveIdChange
• defaultActiveId

Using activeId + onActiveIdChange, you'll be able to fully control the activeId, while defaultActiveId could still be used in case you don't want to control it externally, but still want to have a certain arc highlighted by default.

I think that's a feature which can be released soon, I'll keep you updated on the progress.

[plouc]

This feature has been released in 0.84.0, @barrymichaeldoyle, you might also want to have a look at forwardLegendData to implement your custom legend.

[sebastienbarre]

@plouc This looks but could we have it for bar charts too please?

What I have is essentially a bar chart and a regular table under it with all the data. Each row in the table corresponds to a bar in the chart. When a user hover a row in the table, I'd like to highlight the corresponding bar in the chart, so they can see how they match visually.

By highlighting I don't mean changing the geometry/shape of the bar, but maybe change the color of the bar to be lighter or darker compared to the other bars. The colors callback prop on the bar chart could for example use that activeId to change the active bar (since it received the bar id already).

I assume this can be done right now but that means the colors callback would change on hover to take into account the new active id, which means the chart would be redrawn very frequently since I assume it is redrawn when its props change (like the colors prop).

Thanks!