You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Charting Control
VerticalBarChart
Package version
5.23.12
React version
18.3.1
Environment
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
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
The text was updated successfully, but these errors were encountered: