[Bug]: Items from Legend container set a state of the chart when clicked that CANNOT be unclicked afterwards

[Kristian Kirilov]

Charting Control

VerticalBarChart

Package version

5.23.12

React version

18.3.1

Environment

System:
    OS: Windows 10 10.0.20348
    CPU: (8) x64 AMD EPYC 7763 64-Core Processor
    Memory: 29.78 GB / 64.00 GB
  Browsers:
    Edge: Chromium (131.0.2903.51)
    Internet Explorer: 11.0.20348.2520
  npmPackages:
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1

Current Behavior

I have created a custom staced VerticalBarChart with multiple line data. The bars and lines are enabled in the legend using the hideLegend property when constructing the config
const config: IVerticalStackedBarChartProps = { data: formattedData, hideLegend: false, secondaryYScaleOptions: { yMinValue: parseInt((minPercentChange - 5).toFixed(0)), yMaxValue: parseInt((maxPercentChange + 5).toFixed(0)) }, yAxisTitle: "Total Revenue ($)", xAxisTitle: "Year", secondaryYAxistitle: "Growth (%)", tickFormat: '%yyyy', yAxisTickFormat: (y: number) =>${formatCurrency(y, 1)}, };

However, when I select a legend items at the bottom, the chart enters a state in which it highlights this exact item on the chart. This state is NON-REVERSIBLE. You cannot get rid of this state and come back to the normal view of the chart. See screenshot below:

BASICALLY, THE ONLY WAY TO GET RID OF THIS BUG IS TO NOT USE THE LEGEND AT ALL. Which I don't consider an option in my case.

Expected Behavior

Each chart with a hideLegend: false configuration should be able to easily transition between a state of 1 selected item from legendContainer and no selection. A reproduction link will be included in this bug issue.

Reproduction

https://stackblitz.com/edit/vitejs-vite-e6mvhk?file=src%2FVerticalBarChart.tsx

Steps to reproduce

1. Visualize the vertical bar chart
2. Go to the legend at the bottom of the chart
3. Hover an item and click it to focus that line/bar on the chart
4. Try to click away or click on the chart to get rid of the single legend selection state

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[Atishay Jain (atisjai)]

The issue does not repro on the stackblitz link shared. I can see only 1 legend in the repro and it is working as expected.

[Kristian Kirilov]

The issue does not repro on the stackblitz link shared. I can see only 1 legend in the repro and it is working as expected.

Upon clicking an item from the legend, you cannot exit this state. This is the main issue discussed in this issue topic

[Atishay Jain (atisjai)]

The issue does not repro with the link provided.
You can reopen this issue once you have a clear repro.