[Feature]: Donut Chart Active Value Prop Feature Request

[kronos1345]

What problem does this feature solve?

Use Case and Context:
This feature would enable automatic activation of the corresponding data point in the DonutChart component when an item is clicked in the Legend component. Currently, clicking on an item in the Legend does not influence the DonutChart, which negatively impacts user experience.

Importance and Rationale:
The feature will enhance user interaction between data visualizations, making it easier for users to understand relationships within the data sets.

What does the proposed API look like?

<DonutChart
  data={...}
  category="..."
  index="..."
  // Other props
  activeValue={this.state.activeValue} // Newly proposed prop
/>

This new activeValue prop would inform the DonutChart component about which data point should be active. Thus, when an item is clicked in the Legend component, updating this value will activate the corresponding data point in the DonutChart.

The working version of the activeValue prop should be as follows.

[abdelkd]

Just to be sure I understand it. a new legend component with the something like elements as text and when the user clicks on one of them the active prop on the DonutChart would change to what the users clicked? similar to what is on AreaChart right?

[kronos1345]

Hi @abdelkd , thank you for reply.

Yes. Similar to AreaChart. But this shouldn't only happen through LegendSlider. All it takes is an extra prop. In this way, it can be triggered via whatever input it wants to be triggered.

[abdelkd]

yeah exactly. what I'm thinking about is new two props. showLegend and activeValue or activeSector so the user would be able to choose between showing legend or not and ability to trigger active value manually.

[abdelkd]

@severinlandolt can I try working on this?

[severinlandolt]

Hey there! Thanks for the discussion. The donut chart has deliberately no Legend. Your proposal to add activeSector prop thus makes sense. I will discuss this with the team and assign @abdelkd if we want to make this addition.

[kronos1345]

Thank you @severinlandolt . We are waiting..

[saman-des]

Would absolutely love to have this feature.

[khanhtruong0808]

Would love this feature. I plan on putting the activeSector prop into a search parameter so that the selected section is active on page load. This would help tremendously.

[abdelkd]

Since I've lost all my pc data, I did it again but with some changes. The legend is hidden by default unless you provide activeSector as a string or null. In case of null the legend will be shown but with no default value selected.

Would love this feature. I plan on putting the activeSector prop into a search parameter so that the selected section is active on page load. This would help tremendously.

I like your idea, I will be making the PR once @severinlandolt say his opinion about it

[severinlandolt]

@abdelkd Hi, happy to review, but cannot promise that it will get merged :)