From cef4039f05bedfb4317621050512c1f5186b9b01 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Wed, 5 Nov 2025 14:31:17 +0530 Subject: [PATCH 1/3] updated example stories data to match the callout value in grouped vertical bar chart --- ...GroupedVerticalBarChartDefault.stories.tsx | 48 +++++++++---------- .../GroupedVerticalBarChart.Basic.Example.tsx | 48 +++++++++---------- 2 files changed, 48 insertions(+), 48 deletions(-) diff --git a/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx index 74b8a499b72f9..baf06cdf7c604 100644 --- a/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx +++ b/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx @@ -28,9 +28,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/04/30', - yAxisCalloutData: '29%', + yAxisCalloutData: '33%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 1 of 2 2022, x value 2022/04/30, y value 29%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 1 of 2 2022, x value 2022/04/30, y value 33%', }, }, { @@ -50,9 +50,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/04/30', - yAxisCalloutData: '44%', + yAxisCalloutData: '54%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 44%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 54%', }, }, { @@ -61,9 +61,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/04/30', - yAxisCalloutData: '44%', + yAxisCalloutData: '24%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 44%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 24%', }, }, ], @@ -77,9 +77,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/05/30', - yAxisCalloutData: '29%', + yAxisCalloutData: '33%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 1 of 2 2022, x value 2022/05/30, y value 29%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 1 of 2 2022, x value 2022/05/30, y value 33%', }, }, { @@ -99,9 +99,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/05/30', - yAxisCalloutData: '3%', + yAxisCalloutData: '9%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 3%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 9%', }, }, { @@ -110,9 +110,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/05/30', - yAxisCalloutData: '3%', + yAxisCalloutData: '12%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 3%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 12%', }, }, ], @@ -127,9 +127,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/06/30', - yAxisCalloutData: '13%', + yAxisCalloutData: '14%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 1 of 2 2022, x value 2022/06/30, y value 13%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 1 of 2 2022, x value 2022/06/30, y value 14%', }, }, { @@ -149,9 +149,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/06/30', - yAxisCalloutData: '50%', + yAxisCalloutData: '60%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 50%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 60%', }, }, { @@ -160,9 +160,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/06/30', - yAxisCalloutData: '50%', + yAxisCalloutData: '10%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 50%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 10%', }, }, ], @@ -176,9 +176,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/07/30', - yAxisCalloutData: '29%', + yAxisCalloutData: '33%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 1 of 2 2022, x value 2022/07/30, y value 29%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 1 of 2 2022, x value 2022/07/30, y value 33%', }, }, { @@ -198,9 +198,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/07/30', - yAxisCalloutData: '3%', + yAxisCalloutData: '6%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 3%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 6%', }, }, { @@ -209,9 +209,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/07/30', - yAxisCalloutData: '3%', + yAxisCalloutData: '15%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 3%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 15%', }, }, ], diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx index bf9decc404945..322e10ea1eaf2 100644 --- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx @@ -96,9 +96,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/04/30', - yAxisCalloutData: '29%', + yAxisCalloutData: '33%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 1 of 2 2022, x value 2022/04/30, y value 29%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 1 of 2 2022, x value 2022/04/30, y value 33%', }, }, { @@ -118,9 +118,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/04/30', - yAxisCalloutData: '44%', + yAxisCalloutData: '54%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 44%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 54%', }, }, { @@ -129,9 +129,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/04/30', - yAxisCalloutData: '44%', + yAxisCalloutData: '24%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 44%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 24%', }, }, ], @@ -145,9 +145,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/05/30', - yAxisCalloutData: '29%', + yAxisCalloutData: '33%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 1 of 2 2022, x value 2022/05/30, y value 29%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 1 of 2 2022, x value 2022/05/30, y value 33%', }, }, { @@ -167,9 +167,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/05/30', - yAxisCalloutData: '3%', + yAxisCalloutData: '9%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 3%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 9%', }, }, { @@ -178,9 +178,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/05/30', - yAxisCalloutData: '3%', + yAxisCalloutData: '12%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 3%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 12%', }, }, ], @@ -195,9 +195,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/06/30', - yAxisCalloutData: '13%', + yAxisCalloutData: '14%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 1 of 2 2022, x value 2022/06/30, y value 13%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 1 of 2 2022, x value 2022/06/30, y value 14%', }, }, { @@ -217,9 +217,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/06/30', - yAxisCalloutData: '50%', + yAxisCalloutData: '60%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 50%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 60%', }, }, { @@ -228,9 +228,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/06/30', - yAxisCalloutData: '50%', + yAxisCalloutData: '10%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 50%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 10%', }, }, ], @@ -244,9 +244,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/07/30', - yAxisCalloutData: '29%', + yAxisCalloutData: '33%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 1 of 2 2022, x value 2022/07/30, y value 29%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 1 of 2 2022, x value 2022/07/30, y value 33%', }, }, { @@ -266,9 +266,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/07/30', - yAxisCalloutData: '3%', + yAxisCalloutData: '6%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 3%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 6%', }, }, { @@ -277,9 +277,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/07/30', - yAxisCalloutData: '3%', + yAxisCalloutData: '15%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 3%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 15%', }, }, ], From 524b6097ade780eb9e75c013c6a3e98a04253b38 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Thu, 6 Nov 2025 10:11:07 +0530 Subject: [PATCH 2/3] updated example stories data to match the callout value in grouped vertical bar chart --- ...GroupedVerticalBarChartDefault.stories.tsx | 64 +++++++++---------- .../GroupedVerticalBarChart.Basic.Example.tsx | 64 +++++++++---------- 2 files changed, 64 insertions(+), 64 deletions(-) diff --git a/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx index baf06cdf7c604..0d12ef830a544 100644 --- a/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx +++ b/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx @@ -28,9 +28,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/04/30', - yAxisCalloutData: '33%', + yAxisCalloutData: '21%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 1 of 2 2022, x value 2022/04/30, y value 33%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 1 of 2 2022, x value 2022/04/30, y value 21%', }, }, { @@ -39,9 +39,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color4), legend: '2023', xAxisCalloutData: '2023/04/30', - yAxisCalloutData: '44%', + yAxisCalloutData: '28%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 2 of 2 2023, x value 2023/04/30, y value 44%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 2 of 2 2023, x value 2023/04/30, y value 28%', }, }, { @@ -50,9 +50,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/04/30', - yAxisCalloutData: '54%', + yAxisCalloutData: '35%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 54%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 35%', }, }, { @@ -61,9 +61,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/04/30', - yAxisCalloutData: '24%', + yAxisCalloutData: '16%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 24%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 16%', }, }, ], @@ -77,9 +77,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/05/30', - yAxisCalloutData: '33%', + yAxisCalloutData: '58%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 1 of 2 2022, x value 2022/05/30, y value 33%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 1 of 2 2022, x value 2022/05/30, y value 58%', }, }, { @@ -88,9 +88,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color4), legend: '2023', xAxisCalloutData: '2023/05/30', - yAxisCalloutData: '3%', + yAxisCalloutData: '5%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 2 of 2 2023, x value 2023/05/30, y value 3%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 2 of 2 2023, x value 2023/05/30, y value 5%', }, }, { @@ -99,9 +99,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/05/30', - yAxisCalloutData: '9%', + yAxisCalloutData: '16%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 9%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 16%', }, }, { @@ -110,9 +110,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/05/30', - yAxisCalloutData: '12%', + yAxisCalloutData: '21%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 12%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 21%', }, }, ], @@ -127,9 +127,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/06/30', - yAxisCalloutData: '14%', + yAxisCalloutData: '11%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 1 of 2 2022, x value 2022/06/30, y value 14%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 1 of 2 2022, x value 2022/06/30, y value 11%', }, }, { @@ -138,9 +138,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color4), legend: '2023', xAxisCalloutData: '2023/06/30', - yAxisCalloutData: '50%', + yAxisCalloutData: '37%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 2 of 2 2023, x value 2023/06/30, y value 50%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 2 of 2 2023, x value 2023/06/30, y value 37%', }, }, { @@ -149,9 +149,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/06/30', - yAxisCalloutData: '60%', + yAxisCalloutData: '45%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 60%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 45%', }, }, { @@ -160,9 +160,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/06/30', - yAxisCalloutData: '10%', + yAxisCalloutData: '7%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 10%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 7%', }, }, ], @@ -176,9 +176,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/07/30', - yAxisCalloutData: '33%', + yAxisCalloutData: '58%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 1 of 2 2022, x value 2022/07/30, y value 33%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 1 of 2 2022, x value 2022/07/30, y value 58%', }, }, { @@ -187,9 +187,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color4), legend: '2023', xAxisCalloutData: '2023/07/30', - yAxisCalloutData: '3%', + yAxisCalloutData: '5%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 2 of 2 2023, x value 2023/07/30, y value 3%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 2 of 2 2023, x value 2023/07/30, y value 5%', }, }, { @@ -198,9 +198,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/07/30', - yAxisCalloutData: '6%', + yAxisCalloutData: '11%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 6%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 11%', }, }, { @@ -209,9 +209,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/07/30', - yAxisCalloutData: '15%', + yAxisCalloutData: '26%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 15%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 26%', }, }, ], diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx index 322e10ea1eaf2..32c084e407477 100644 --- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx @@ -96,9 +96,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/04/30', - yAxisCalloutData: '33%', + yAxisCalloutData: '21%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 1 of 2 2022, x value 2022/04/30, y value 33%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 1 of 2 2022, x value 2022/04/30, y value 21%', }, }, { @@ -107,9 +107,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color4), legend: '2023', xAxisCalloutData: '2023/04/30', - yAxisCalloutData: '44%', + yAxisCalloutData: '28%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 2 of 2 2023, x value 2023/04/30, y value 44%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 2 of 2 2023, x value 2023/04/30, y value 28%', }, }, { @@ -118,9 +118,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/04/30', - yAxisCalloutData: '54%', + yAxisCalloutData: '35%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 54%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 35%', }, }, { @@ -129,9 +129,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/04/30', - yAxisCalloutData: '24%', + yAxisCalloutData: '16%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 24%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 16%', }, }, ], @@ -145,9 +145,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/05/30', - yAxisCalloutData: '33%', + yAxisCalloutData: '58%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 1 of 2 2022, x value 2022/05/30, y value 33%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 1 of 2 2022, x value 2022/05/30, y value 58%', }, }, { @@ -156,9 +156,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color4), legend: '2023', xAxisCalloutData: '2023/05/30', - yAxisCalloutData: '3%', + yAxisCalloutData: '5%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 2 of 2 2023, x value 2023/05/30, y value 3%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 2 of 2 2023, x value 2023/05/30, y value 5%', }, }, { @@ -167,9 +167,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/05/30', - yAxisCalloutData: '9%', + yAxisCalloutData: '16%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 9%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 16%', }, }, { @@ -178,9 +178,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/05/30', - yAxisCalloutData: '12%', + yAxisCalloutData: '21%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 12%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 21%', }, }, ], @@ -195,9 +195,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/06/30', - yAxisCalloutData: '14%', + yAxisCalloutData: '11%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 1 of 2 2022, x value 2022/06/30, y value 14%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 1 of 2 2022, x value 2022/06/30, y value 11%', }, }, { @@ -206,9 +206,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color4), legend: '2023', xAxisCalloutData: '2023/06/30', - yAxisCalloutData: '50%', + yAxisCalloutData: '37%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 2 of 2 2023, x value 2023/06/30, y value 50%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 2 of 2 2023, x value 2023/06/30, y value 37%', }, }, { @@ -217,9 +217,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/06/30', - yAxisCalloutData: '60%', + yAxisCalloutData: '45%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 60%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 45%', }, }, { @@ -228,9 +228,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/06/30', - yAxisCalloutData: '10%', + yAxisCalloutData: '7%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 10%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 7%', }, }, ], @@ -244,9 +244,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/07/30', - yAxisCalloutData: '33%', + yAxisCalloutData: '58%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 1 of 2 2022, x value 2022/07/30, y value 33%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 1 of 2 2022, x value 2022/07/30, y value 58%', }, }, { @@ -255,9 +255,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color4), legend: '2023', xAxisCalloutData: '2023/07/30', - yAxisCalloutData: '3%', + yAxisCalloutData: '5%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 2 of 2 2023, x value 2023/07/30, y value 3%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 2 of 2 2023, x value 2023/07/30, y value 5%', }, }, { @@ -266,9 +266,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/07/30', - yAxisCalloutData: '6%', + yAxisCalloutData: '11%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 6%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 11%', }, }, { @@ -277,9 +277,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/07/30', - yAxisCalloutData: '15%', + yAxisCalloutData: '26%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 15%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 26%', }, }, ], From b7c3d08de3b95f70d176ded7681aa875fe009a49 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Mon, 10 Nov 2025 10:10:55 +0530 Subject: [PATCH 3/3] updated example stories data to match the callout value in grouped vertical bar chart --- ...GroupedVerticalBarChartDefault.stories.tsx | 64 +++++++++---------- .../GroupedVerticalBarChart.Basic.Example.tsx | 64 +++++++++---------- 2 files changed, 64 insertions(+), 64 deletions(-) diff --git a/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx b/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx index 0d12ef830a544..80f06009a612b 100644 --- a/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx +++ b/packages/charts/react-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx @@ -28,9 +28,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/04/30', - yAxisCalloutData: '21%', + yAxisCalloutData: '29%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 1 of 2 2022, x value 2022/04/30, y value 21%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 1 of 2 2022, x value 2022/04/30, y value 29%', }, }, { @@ -39,9 +39,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color4), legend: '2023', xAxisCalloutData: '2023/04/30', - yAxisCalloutData: '28%', + yAxisCalloutData: '44%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 2 of 2 2023, x value 2023/04/30, y value 28%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 2 of 2 2023, x value 2023/04/30, y value 44%', }, }, { @@ -50,9 +50,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/04/30', - yAxisCalloutData: '35%', + yAxisCalloutData: '42%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 35%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 42%', }, }, { @@ -61,9 +61,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/04/30', - yAxisCalloutData: '16%', + yAxisCalloutData: '39%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 16%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 39%', }, }, ], @@ -77,9 +77,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/05/30', - yAxisCalloutData: '58%', + yAxisCalloutData: '29%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 1 of 2 2022, x value 2022/05/30, y value 58%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 1 of 2 2022, x value 2022/05/30, y value 29%', }, }, { @@ -88,9 +88,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color4), legend: '2023', xAxisCalloutData: '2023/05/30', - yAxisCalloutData: '5%', + yAxisCalloutData: '3%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 2 of 2 2023, x value 2023/05/30, y value 5%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 2 of 2 2023, x value 2023/05/30, y value 3%', }, }, { @@ -99,9 +99,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/05/30', - yAxisCalloutData: '16%', + yAxisCalloutData: '7%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 16%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 7%', }, }, { @@ -110,9 +110,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/05/30', - yAxisCalloutData: '21%', + yAxisCalloutData: '20%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 21%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 20%', }, }, ], @@ -127,9 +127,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/06/30', - yAxisCalloutData: '11%', + yAxisCalloutData: '13%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 1 of 2 2022, x value 2022/06/30, y value 11%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 1 of 2 2022, x value 2022/06/30, y value 13%', }, }, { @@ -138,9 +138,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color4), legend: '2023', xAxisCalloutData: '2023/06/30', - yAxisCalloutData: '37%', + yAxisCalloutData: '50%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 2 of 2 2023, x value 2023/06/30, y value 37%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 2 of 2 2023, x value 2023/06/30, y value 50%', }, }, { @@ -149,9 +149,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/06/30', - yAxisCalloutData: '45%', + yAxisCalloutData: '47%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 45%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 47%', }, }, { @@ -160,9 +160,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/06/30', - yAxisCalloutData: '7%', + yAxisCalloutData: '16%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 7%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 16%', }, }, ], @@ -176,9 +176,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/07/30', - yAxisCalloutData: '58%', + yAxisCalloutData: '29%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 1 of 2 2022, x value 2022/07/30, y value 58%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 1 of 2 2022, x value 2022/07/30, y value 29%', }, }, { @@ -187,9 +187,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color4), legend: '2023', xAxisCalloutData: '2023/07/30', - yAxisCalloutData: '5%', + yAxisCalloutData: '3%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 2 of 2 2023, x value 2023/07/30, y value 5%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 2 of 2 2023, x value 2023/07/30, y value 3%', }, }, { @@ -198,9 +198,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/07/30', - yAxisCalloutData: '11%', + yAxisCalloutData: '4%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 11%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 4%', }, }, { @@ -209,9 +209,9 @@ export const GroupedVerticalBarDefault = (): JSXElement => { color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/07/30', - yAxisCalloutData: '26%', + yAxisCalloutData: '25%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 26%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 25%', }, }, ], diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx index 32c084e407477..4db6b7fcaffd3 100644 --- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx @@ -96,9 +96,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/04/30', - yAxisCalloutData: '21%', + yAxisCalloutData: '29%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 1 of 2 2022, x value 2022/04/30, y value 21%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 1 of 2 2022, x value 2022/04/30, y value 29%', }, }, { @@ -107,9 +107,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color4), legend: '2023', xAxisCalloutData: '2023/04/30', - yAxisCalloutData: '28%', + yAxisCalloutData: '44%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 2 of 2 2023, x value 2023/04/30, y value 28%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 2 of 2 2023, x value 2023/04/30, y value 44%', }, }, { @@ -118,9 +118,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/04/30', - yAxisCalloutData: '35%', + yAxisCalloutData: '42%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 35%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 3 of 4 2022, x value 2024/04/30, y value 42%', }, }, { @@ -129,9 +129,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/04/30', - yAxisCalloutData: '16%', + yAxisCalloutData: '39%', callOutAccessibilityData: { - ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 16%', + ariaLabel: 'Group Jan - Mar 1 of 4, Bar series 4 of 4 2021, x value 2021/04/30, y value 39%', }, }, ], @@ -145,9 +145,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/05/30', - yAxisCalloutData: '58%', + yAxisCalloutData: '29%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 1 of 2 2022, x value 2022/05/30, y value 58%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 1 of 2 2022, x value 2022/05/30, y value 29%', }, }, { @@ -156,9 +156,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color4), legend: '2023', xAxisCalloutData: '2023/05/30', - yAxisCalloutData: '5%', + yAxisCalloutData: '3%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 2 of 2 2023, x value 2023/05/30, y value 5%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 2 of 2 2023, x value 2023/05/30, y value 3%', }, }, { @@ -167,9 +167,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/05/30', - yAxisCalloutData: '16%', + yAxisCalloutData: '7%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 16%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 3 of 4 2024, x value 2024/05/30, y value 7%', }, }, { @@ -178,9 +178,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/05/30', - yAxisCalloutData: '21%', + yAxisCalloutData: '20%', callOutAccessibilityData: { - ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 21%', + ariaLabel: 'Group Apr - Jun 2 of 4, Bar series 4 of 4 2021, x value 2021/05/30, y value 20%', }, }, ], @@ -195,9 +195,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/06/30', - yAxisCalloutData: '11%', + yAxisCalloutData: '13%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 1 of 2 2022, x value 2022/06/30, y value 11%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 1 of 2 2022, x value 2022/06/30, y value 13%', }, }, { @@ -206,9 +206,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color4), legend: '2023', xAxisCalloutData: '2023/06/30', - yAxisCalloutData: '37%', + yAxisCalloutData: '50%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 2 of 2 2023, x value 2023/06/30, y value 37%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 2 of 2 2023, x value 2023/06/30, y value 50%', }, }, { @@ -217,9 +217,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/06/30', - yAxisCalloutData: '45%', + yAxisCalloutData: '47%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 45%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 3 of 4 2024, x value 2024/06/30, y value 47%', }, }, { @@ -228,9 +228,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/06/30', - yAxisCalloutData: '7%', + yAxisCalloutData: '16%', callOutAccessibilityData: { - ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 7%', + ariaLabel: 'Group Jul - Sep 3 of 4, Bar series 4 of 4 2021, x value 2021/06/30, y value 16%', }, }, ], @@ -244,9 +244,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color3), legend: '2022', xAxisCalloutData: '2022/07/30', - yAxisCalloutData: '58%', + yAxisCalloutData: '29%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 1 of 2 2022, x value 2022/07/30, y value 58%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 1 of 2 2022, x value 2022/07/30, y value 29%', }, }, { @@ -255,9 +255,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color4), legend: '2023', xAxisCalloutData: '2023/07/30', - yAxisCalloutData: '5%', + yAxisCalloutData: '3%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 2 of 2 2023, x value 2023/07/30, y value 5%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 2 of 2 2023, x value 2023/07/30, y value 3%', }, }, { @@ -266,9 +266,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color5), legend: '2024', xAxisCalloutData: '2024/07/30', - yAxisCalloutData: '11%', + yAxisCalloutData: '4%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 11%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 3 of 4 2024, x value 2024/07/30, y value 4%', }, }, { @@ -277,9 +277,9 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr color: getColorFromToken(DataVizPalette.color6), legend: '2021', xAxisCalloutData: '2021/07/30', - yAxisCalloutData: '26%', + yAxisCalloutData: '25%', callOutAccessibilityData: { - ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 26%', + ariaLabel: 'Group Oct - Dec 4 of 4, Bar series 4 of 4 2021, x value 2021/07/30, y value 25%', }, }, ],