microsoft / microsoft/fluentui

Incorrect scaling ratio in Horizontal bar chart

Open Beginner friendly
#30,129 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Fluent UI react (v8) Package: charting Resolution: Soft Close Status: In PR
Dominant language
TypeScript
Stars
20.3k
Forks
2.9k
Avg merge
2d 9h
Merged PRs (30d)
46

Description

Actual Behavior

The scaling ratio is defined in the HorizontalBarChart as follows:

const scalingRatio = sumOfPercent !== 0 ? (sumOfPercent - totalMarginPercent) / 100 : 1;

Expected Behavior

The total width required for rendering all the bar segments without any gaps is derived by subtracting the total width of all the gaps (totalMarginPercent) from 100. The scaling ratio is correctly defined in both the MultiStackedBarChart and the StackedBarChart as follows:

const scalingRatio = sumOfPercent !== 0 ? sumOfPercent / (100 - totalMarginPercent) : 1;

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Locate the HorizontalBarChart implementation and compare its scaling-ratio calculation with the corresponding logic in MultiStackedBarChart and StackedBarChart. Verify the behavior for nonzero segment percentages and margins, then update or add the relevant chart test so the rendered segments occupy the intended width without gaps.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.