Introduce a new annotated version of Horizontal Bar Charts #34825

AnweshaKnowles · 2025-07-14T05:15:22Z

Previous Behavior

We did not have a variant for the Horizontal Bar chart that would show the percentages for the segments under each.

New Behavior

Adding a version of the horizontal bar chart where we can see the percents of each segment under each.
As per our designer, each segment shall have a minimum width which will not go below 35px. This is done to accommodate the annotation and an optional JSX element that may be rendered beside the annotation below each segment.

There is an edge case where 30px is not available, in that case, each segment will still have a minimum width but may be smaller than 35px. And in such cases, we may not show the annotation text at all and only the optional JSX element.

On small screens

Related Issue(s)

Fixes #

packages/web-components/docs/web-components.api.md

...es/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.types.ts

packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx

AtishayMsft · 2025-07-15T01:03:20Z

packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx

+
+    let prevPosition = 0;
+
+    const annotatedBars = adjustedSegments!.map((segment, index) => {


what happens if there are 19 bars with value of 1 and 1 bar with value of 100. How does the chart look

Please refer to the last bar in the screenshot for reference.

Our designer has specifically requested that each segment must have a minimum width, even if its value is very small, so that there's enough space to display the annotation.

As a result, larger segments will need to be scaled down, and the visual proportions will no longer accurately reflect the actual data values.

This is a conscious design decision, annotation visibility is being prioritized over exact visual accuracy.

AtishayMsft · 2025-07-15T02:10:42Z

...es/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.types.ts

@@ -195,7 +211,7 @@ export interface HorizontalBarChartStyles {
 * percentage: show the percentage of (datapoint.x/datapoint.y)%
 * {@docCategory HorizontalBarChart}
 */
-export type ChartDataMode = 'default' | 'fraction' | 'percentage';
+export type ChartDataMode = 'default' | 'fraction' | 'percentage' | 'hidden';


you are not hiding the labels, but moving it to the bottom. Can you adjust the mode accordingly.

Context:
Currently, each bar in the chart displays the total (sum of all its segments) at the top-right corner. However, our design explicitly does not want this total to be shown. This is not the same as per-segment annotations. The value in question is a summation of all segments in a bar, and we want to completely hide it.

Problem:
There is no existing way to disable this behavior as the sum is always rendered.

Proposed Solution:
I've introduced a new prop and documented it. When this prop is enabled, the chart will return early from the function that renders the bar total, effectively skipping its rendering.

This value is for the showAnnotationsInPercentage prop that you have added. Instead of adding 1 more prop, you can add a variant to chartDataMode called 'annotationsPercent' and use it to hide or customize the label

AtishayMsft · 2025-07-15T02:11:07Z

packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx

@@ -204,6 +210,149 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
    );
  }

+  function _createAnnotatedBars(data: ChartProps, minSegmentMinWidthPercent: number): JSX.Element[] {


How to avoid the code duplication introduced in this function

I’d prefer not to refactor this function as part of this change. Since it involves both existing logic and the new variant, there’s a risk of mixing logic and unintentionally introducing bugs. I think it’s safer to keep this new variant focused code separate since it is a unique use case and no other team will likely need such a tailored version.

That said, if you feel strongly about refactoring the common code, I’m happy to give it a try, just wanted to flag the potential risk.

AnweshaKnowles · 2025-07-15T23:07:14Z

@AnweshaKnowles please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.
@microsoft-github-policy-service agree [company="{your company}"]
Options:

(default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.
@microsoft-github-policy-service agree
(when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.
@microsoft-github-policy-service agree company="Microsoft"
Contributor License Agreement

Contribution License Agreement

This Contribution License Agreement (“Agreement”) is agreed to by the party signing below (“You”), and conveys certain license rights to Microsoft Corporation and its affiliates (“Microsoft”) for Your contributions to Microsoft open source projects. This Agreement is effective as of the latest signature date below.

Definitions.
“Code” means the computer software code, whether in human-readable or machine-executable form,
that is delivered by You to Microsoft under this Agreement.
“Project” means any of the projects owned or managed by Microsoft and offered under a license
approved by the Open Source Initiative (www.opensource.org).
“Submit” is the act of uploading, submitting, transmitting, or distributing code or other content to any
Project, including but not limited to communication on electronic mailing lists, source code control
systems, and issue tracking systems that are managed by, or on behalf of, the Project for the purpose of
discussing and improving that Project, but excluding communication that is conspicuously marked or
otherwise designated in writing by You as “Not a Submission.”
“Submission” means the Code and any other copyrightable material Submitted by You, including any
associated comments and documentation.

Your Submission. You must agree to the terms of this Agreement before making a Submission to any
Project. This Agreement covers any and all Submissions that You, now or in the future (except as
described in Section 4 below), Submit to any Project.

Originality of Work. You represent that each of Your Submissions is entirely Your original work.
Should You wish to Submit materials that are not Your original work, You may Submit them separately
to the Project if You (a) retain all copyright and license information that was in the materials as You
received them, (b) in the description accompanying Your Submission, include the phrase “Submission
containing materials of a third party:” followed by the names of the third party and any licenses or other
restrictions of which You are aware, and (c) follow any other instructions in the Project’s written
guidelines concerning Submissions.

Your Employer. References to “employer” in this Agreement include Your employer or anyone else
for whom You are acting in making Your Submission, e.g. as a contractor, vendor, or agent. If Your
Submission is made in the course of Your work for an employer or Your employer has intellectual
property rights in Your Submission by contract or applicable law, You must secure permission from Your
employer to make the Submission before signing this Agreement. In that case, the term “You” in this
Agreement will refer to You and the employer collectively. If You change employers in the future and
desire to Submit additional Submissions for the new employer, then You agree to sign a new Agreement
and secure permission from the new employer before Submitting those Submissions.

Licenses.

Copyright License. You grant Microsoft, and those who receive the Submission directly or
indirectly from Microsoft, a perpetual, worldwide, non-exclusive, royalty-free, irrevocable license in the
Submission to reproduce, prepare derivative works of, publicly display, publicly perform, and distribute
the Submission and such derivative works, and to sublicense any or all of the foregoing rights to third
parties.

Patent License. You grant Microsoft, and those who receive the Submission directly or
indirectly from Microsoft, a perpetual, worldwide, non-exclusive, royalty-free, irrevocable license under
Your patent claims that are necessarily infringed by the Submission or the combination of the
Submission with the Project to which it was Submitted to make, have made, use, offer to sell, sell and
import or otherwise dispose of the Submission alone or with the Project.

Other Rights Reserved. Each party reserves all rights not expressly granted in this Agreement.
No additional licenses or rights whatsoever (including, without limitation, any implied licenses) are
granted by implication, exhaustion, estoppel or otherwise.

Representations and Warranties. You represent that You are legally entitled to grant the above
licenses. You represent that each of Your Submissions is entirely Your original work (except as You may
have disclosed under Section 3). You represent that You have secured permission from Your employer to
make the Submission in cases where Your Submission is made in the course of Your work for Your
employer or Your employer has intellectual property rights in Your Submission by contract or applicable
law. If You are signing this Agreement on behalf of Your employer, You represent and warrant that You
have the necessary authority to bind the listed employer to the obligations contained in this Agreement.
You are not expected to provide support for Your Submission, unless You choose to do so. UNLESS
REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING, AND EXCEPT FOR THE WARRANTIES
EXPRESSLY STATED IN SECTIONS 3, 4, AND 6, THE SUBMISSION PROVIDED UNDER THIS AGREEMENT IS
PROVIDED WITHOUT WARRANTY OF ANY KIND, INCLUDING, BUT NOT LIMITED TO, ANY WARRANTY OF
NONINFRINGEMENT, MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE.

Notice to Microsoft. You agree to notify Microsoft in writing of any facts or circumstances of which
You later become aware that would make Your representations in this Agreement inaccurate in any
respect.

Information about Submissions. You agree that contributions to Projects and information about
contributions may be maintained indefinitely and disclosed publicly, including Your name and other
information that You submit with Your Submission.

Governing Law/Jurisdiction. This Agreement is governed by the laws of the State of Washington, and
the parties consent to exclusive jurisdiction and venue in the federal courts sitting in King County,
Washington, unless no federal subject matter jurisdiction exists, in which case the parties consent to
exclusive jurisdiction and venue in the Superior Court of King County, Washington. The parties waive all
defenses of lack of personal jurisdiction and forum non-conveniens.

Entire Agreement/Assignment. This Agreement is the entire agreement between the parties, and
supersedes any and all prior agreements, understandings or communications, written or oral, between
the parties relating to the subject matter hereof. This Agreement may be assigned by Microsoft.

@microsoft-github-policy-service agree company="Microsoft"

AtishayMsft · 2025-07-16T01:17:03Z

...es/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.types.ts

+   */
+  allowHoverOnSegment?: boolean;
+
+  // renderAnnotationAddon?: (index: number) => JSX.Element;


// renderAnnotationAddon?: (index: number) => JSX.Element;

give it correct documentation

AtishayMsft · 2025-07-16T01:18:00Z

...es/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.types.ts

@@ -204,3 +230,9 @@ export enum HorizontalBarChartVariant {
  PartToWhole = 'part-to-whole',
  AbsoluteScale = 'absolute-scale',
 }
+
+export type segment = {


I don't see this exported type being used anywhere outside the control

AtishayMsft · 2025-07-16T01:20:59Z

packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx

+      tokens.colorPaletteDarkGreenForeground2,
+      tokens.colorPaletteNavyForeground2,
+      tokens.colorPaletteDarkOrangeForeground2,
+    ];


This defaultColors array can be refactored without any issue

AtishayMsft · 2025-07-16T01:21:53Z

...ts/react-charts/library/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap

@@ -150,7 +150,7 @@ Object {
              </g>
            </g>
            <g
-              aria-label="Mar/01, p2. Nasty, 50/2391. a good day to start with in Texas with best air quality."
+              aria-label="Feb/29, p2. Nasty, 50/2391. a good day to start with in Texas with best air quality."


aria-label="Feb/29

revert this unintended change

AtishayMsft · 2025-07-16T01:23:19Z

packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx

@@ -204,6 +211,169 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
    );
  }

+  function _createAnnotatedBars(data: ChartProps): JSX.Element[] {


_createAnnotatedBars

snapshot test for this variant is pending

github-actions · 2025-07-16T01:24:50Z

📊 Bundle size report

✅ No changes found

github-actions · 2025-07-16T01:27:52Z

Pull request demo site: URL

github-actions · 2025-07-16T01:44:08Z

change/@fluentui-react-charts-d340ad00-e0cf-4529-88fd-dfeab85f9305.json

@@ -0,0 +1,7 @@
+{


🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Charts-DonutChart 1 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png 30793 Changed

vr-tests-react-components/Drawer 1 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Drawer.overlay drawer full - High Contrast.chromium.png 6758 Changed

vr-tests-react-components/Positioning 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Positioning.Positioning end.chromium.png 844 Changed

vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 314 Changed

vr-tests-react-components/Skeleton converged 1 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Skeleton converged.Opaque Skeleton with circle - Dark Mode.default.chromium.png 3 Changed

vr-tests-react-components/TagPicker 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png 659 Changed

vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png 1321 Changed

There were 2 duplicate changes discarded. Check the build logs for more information.

…tions

AnweshaKnowles requested review from a team as code owners July 14, 2025 05:15

AtishayMsft reviewed Jul 14, 2025

View reviewed changes

packages/web-components/docs/web-components.api.md Outdated Show resolved Hide resolved

AtishayMsft reviewed Jul 15, 2025

View reviewed changes

...es/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.types.ts Show resolved Hide resolved

AtishayMsft reviewed Jul 15, 2025

View reviewed changes

...es/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.types.ts Outdated Show resolved Hide resolved

AtishayMsft reviewed Jul 15, 2025

View reviewed changes

packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx Outdated Show resolved Hide resolved

AtishayMsft reviewed Jul 15, 2025

View reviewed changes

packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx Outdated Show resolved Hide resolved

AtishayMsft reviewed Jul 15, 2025

View reviewed changes

AnweshaKnowles force-pushed the user/aknowles/HorizontalBarChartWithAnnotations branch from a357611 to 2100736 Compare July 16, 2025 01:08

Introduce a new annotated component

f9626ca

AtishayMsft reviewed Jul 16, 2025

View reviewed changes

AnweshaKnowles force-pushed the user/aknowles/HorizontalBarChartWithAnnotations branch from 2100736 to f9626ca Compare July 16, 2025 01:18

AtishayMsft reviewed Jul 16, 2025

View reviewed changes

AtishayMsft removed the request for review from a team July 16, 2025 01:22

AtishayMsft reviewed Jul 16, 2025

View reviewed changes

github-actions bot reviewed Jul 16, 2025

View reviewed changes

Merge branch 'master' into user/aknowles/HorizontalBarChartWithAnnota…

bd6f5e5

…tions


		let prevPosition = 0;

		const annotatedBars = adjustedSegments!.map((segment, index) => {

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png	844	Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	314	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png	659	Changed
vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png	1321	Changed

Introduce a new annotated version of Horizontal Bar Charts #34825

Are you sure you want to change the base?

Introduce a new annotated version of Horizontal Bar Charts #34825

Uh oh!

Conversation

AnweshaKnowles commented Jul 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AnweshaKnowles Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AnweshaKnowles Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AnweshaKnowles Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AnweshaKnowles commented Jul 15, 2025

Contribution License Agreement

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jul 16, 2025

📊 Bundle size report

Uh oh!

github-actions bot commented Jul 16, 2025

Uh oh!

github-actions bot Jul 16, 2025

Choose a reason for hiding this comment

🕵🏾‍♀️ visual changes to review in the Visual Change Report

Uh oh!

Uh oh!

AnweshaKnowles commented Jul 14, 2025 •

edited

Loading

AnweshaKnowles Jul 16, 2025 •

edited

Loading

AnweshaKnowles Jul 16, 2025 •

edited

Loading

AnweshaKnowles Jul 16, 2025 •

edited

Loading