Skip to content

BUG 12725: Updated example stories data to match the callout value in grouped vertical bar chart #35458

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
+32 −32
Open

BUG 12725: Updated example stories data to match the callout value in grouped vertical bar chart #35458

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cef4039
updated example stories data to match the callout value in grouped ve…
v-baambati Nov 5, 2025
524b609
updated example stories data to match the callout value in grouped ve…
v-baambati Nov 6, 2025
778554a
Merge branch 'master' of https://github.com/microsoft/fluentui into N…
v-baambati Nov 6, 2025
b7c3d08
updated example stories data to match the callout value in grouped ve…
v-baambati Nov 10, 2025
0e16f02
Merge branch 'master' of https://github.com/microsoft/fluentui into N…
v-baambati Nov 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions ...act-charts/stories/src/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%',
},
},
{
Expand All @@ -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%',
},
},
{
Expand All @@ -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%',
},
},
],
Expand All @@ -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%',
},
},
{
Expand All @@ -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%',
},
},
{
Expand All @@ -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%',
},
},
],
Expand All @@ -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%',
},
},
{
Expand All @@ -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%',
},
},
{
Expand All @@ -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%',
},
},
],
Expand All @@ -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%',
},
},
{
Expand All @@ -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%',
},
},
{
Expand All @@ -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%',
},
},
],
Expand Down
48 changes: 24 additions & 24 deletions ...ples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%',
},
},
{
Expand All @@ -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%',
},
},
{
Expand All @@ -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%',
},
},
],
Expand All @@ -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%',
},
},
{
Expand All @@ -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%',
},
},
{
Expand All @@ -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%',
},
},
],
Expand All @@ -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%',
},
},
{
Expand All @@ -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%',
},
},
{
Expand All @@ -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%',
},
},
],
Expand All @@ -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%',
},
},
{
Expand All @@ -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%',
},
},
{
Expand All @@ -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%',
},
},
],
Expand Down