Fix 2:1 spacing in vertical bar charts with string x-axis

[krkshitij]

Previous Behavior

New Behavior

For more information, see RFC: Fix 2:1 spacing | FluentUI Charting Contrib Docsite

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against b1f669dceb6855bdd01d9e7be7764687aa161cf5}

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[size-auditor[bot]]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 99e1128925fa5863a99e311884cc2c710c2606bd (build)

[AtishayMsft]

Can we keep the existing functionality as default behavior if the user does not use the new props.

[krkshitij]

@AtishayMsft To keep the existing functionality as default behavior, we will have to make following changes:

• We will have to set the default bar width to 16px. Users will need to explicitly specify 'undefined' as the bar width to make it update automatically according to padding values.
• While the default inner padding will remain at 2/3 to maintain 2:1 spacing between bars, we will have to increase the default outer padding to center align the 16px bars. However, as padding is a fraction of the step, it can only be increased up to a certain limit making it difficult to maintain 2:1 spacing with 16px bars across different chart widths. To address this, we will have to calculate the extra padding required around the bars (domainMargin), as done previously.

[AtishayMsft]

On editing the inner padding and outer padding input fields, if I set them as empty the chart piles up on the left side.

[AtishayMsft]

On editing the inner padding and outer padding input fields, if I set them as empty the chart piles up on the left side.

make the inner padding and outer padding input fields as a slider from 0 to 1

[AtishayMsft]

Another bug: On selecting the xAxisOuterPadding field, the bar labels are disappearing.