Charting: Added line feature to VerticalBarChart

[khmakoto]

Pull request checklist

• Addresses an existing issue: Part of PRs targeting the 7.0 branch that will need porting into master #15285
• Include a change request file using $ yarn change

Description of changes

Cherry-pick of #15505.

Original PR description:

added line to the vertical bar chart. according to the figma
https://www.figma.com/file/sRqcZakGJ4VpXFWOwBftSU/Apps-health?node-id=30%3A78

Focus areas to test

vertical bar chart

[codesandbox-ci]

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.

Latest deployment of this branch, based on commit 100358a:

Sandbox	Source
Fluent UI Button	Configuration
codesandbox-react-template	Configuration
codesandbox-react-northstar-template	Configuration

[msft-github-bot]

Perf Analysis

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	833	833	5000
BaseButtonCompat	mount	957	936	5000
Breadcrumb	mount	150079	151849	5000
Checkbox	mount	1568	1596	5000
CheckboxBase	mount	1338	1319	5000
ChoiceGroup	mount	4886	4956	5000
ComboBox	mount	1001	985	1000
CommandBar	mount	20972	20889	1000
ContextualMenu	mount	5885	5912	1000
DefaultButtonCompat	mount	1155	1153	5000
DetailsRow	mount	3754	3671	5000
DetailsRowFast	mount	3761	3687	5000
DetailsRowNoStyles	mount	3593	3518	5000
Dialog	mount	1519	1497	1000
DocumentCardTitle	mount	1724	1769	1000
Dropdown	mount	3475	3458	5000
FocusTrapZone	mount	1844	1802	5000
FocusZone	mount	1772	1786	5000
IconButtonCompat	mount	1860	1824	5000
Label	mount	337	330	5000
Layer	mount	1800	1834	5000
Link	mount	467	467	5000
MenuButtonCompat	mount	1523	1519	5000
MessageBar	mount	1996	1972	5000
Nav	mount	3297	3297	1000
OverflowSet	mount	1029	1024	5000
Panel	mount	1449	1357	1000
Persona	mount	847	851	1000
Pivot	mount	1439	1417	1000
PrimaryButtonCompat	mount	1321	1336	5000
Rating	mount	7948	7734	5000
SearchBox	mount	1388	1387	5000
Shimmer	mount	2651	2651	5000
Slider	mount	1977	1967	5000
SpinButton	mount	5094	5085	5000
Spinner	mount	429	420	5000
SplitButtonCompat	mount	3244	3340	5000
Stack	mount	515	523	5000
StackWithIntrinsicChildren	mount	1518	1540	5000
StackWithTextChildren	mount	4810	4797	5000
SwatchColorPicker	mount	10200	10257	5000
TagPicker	mount	2768	2828	5000
TeachingBubble	mount	11481	11450	5000
Text	mount	460	426	5000
TextField	mount	1398	1397	5000
ThemeProvider	mount	1925	1942	5000
ThemeProvider	virtual-rerender	643	637	5000
Toggle	mount	808	810	5000
button	mount	577	578	5000
buttonNative	mount	109	112	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.46	0.52	0.88:1	2000	911
🦄	Button.Fluent	0.12	0.24	0.5:1	5000	607
🔧	Checkbox.Fluent	0.65	0.36	1.81:1	1000	650
🎯	Dialog.Fluent	0.17	0.22	0.77:1	5000	845
🔧	Dropdown.Fluent	2.87	0.4	7.18:1	1000	2865
🔧	Icon.Fluent	0.15	0.06	2.5:1	5000	759
🦄	Image.Fluent	0.08	0.13	0.62:1	5000	419
🔧	Slider.Fluent	1.54	0.44	3.5:1	1000	1540
🔧	Text.Fluent	0.08	0.03	2.67:1	5000	393
🦄	Tooltip.Fluent	0.11	0.88	0.13:1	5000	568

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	185	161	1.15:1
ButtonMinimalPerf.default	203	185	1.1:1
BoxMinimalPerf.default	418	383	1.09:1
FlexMinimalPerf.default	340	316	1.08:1
AnimationMinimalPerf.default	439	410	1.07:1
GridMinimalPerf.default	404	377	1.07:1
ChatDuplicateMessagesPerf.default	444	420	1.06:1
TooltipMinimalPerf.default	856	807	1.06:1
ChatWithPopoverPerf.default	497	474	1.05:1
ListMinimalPerf.default	548	521	1.05:1
TextMinimalPerf.default	396	377	1.05:1
TreeWith60ListItems.default	225	214	1.05:1
AvatarMinimalPerf.default	520	498	1.04:1
ChatMinimalPerf.default	668	645	1.04:1
DividerMinimalPerf.default	433	418	1.04:1
HeaderMinimalPerf.default	423	406	1.04:1
SkeletonMinimalPerf.default	465	445	1.04:1
TableMinimalPerf.default	467	451	1.04:1
ToolbarMinimalPerf.default	1027	986	1.04:1
ButtonUseCssNestingPerf.default	1122	1087	1.03:1
CarouselMinimalPerf.default	481	468	1.03:1
DialogMinimalPerf.default	851	826	1.03:1
FormMinimalPerf.default	462	449	1.03:1
ItemLayoutMinimalPerf.default	1386	1346	1.03:1
LabelMinimalPerf.default	461	447	1.03:1
ListCommonPerf.default	716	692	1.03:1
ListWith60ListItems.default	949	917	1.03:1
ReactionMinimalPerf.default	446	434	1.03:1
RefMinimalPerf.default	237	231	1.03:1
SegmentMinimalPerf.default	401	388	1.03:1
Dialog.Fluent	845	819	1.03:1
CardMinimalPerf.default	609	599	1.02:1
CheckboxMinimalPerf.default	2914	2845	1.02:1
LayoutMinimalPerf.default	442	434	1.02:1
PopupMinimalPerf.default	717	703	1.02:1
RadioGroupMinimalPerf.default	479	471	1.02:1
IconMinimalPerf.default	740	729	1.02:1
VideoMinimalPerf.default	710	697	1.02:1
Button.Fluent	607	598	1.02:1
Slider.Fluent	1540	1508	1.02:1
Text.Fluent	393	387	1.02:1
Tooltip.Fluent	568	556	1.02:1
AttachmentSlotsPerf.default	1172	1161	1.01:1
ButtonOverridesMissPerf.default	1718	1697	1.01:1
ButtonSlotsPerf.default	619	613	1.01:1
DropdownMinimalPerf.default	2938	2895	1.01:1
EmbedMinimalPerf.default	1999	1976	1.01:1
HeaderSlotsPerf.default	849	842	1.01:1
ImageMinimalPerf.default	415	412	1.01:1
InputMinimalPerf.default	1308	1294	1.01:1
ListNestedPerf.default	609	604	1.01:1
LoaderMinimalPerf.default	742	737	1.01:1
MenuMinimalPerf.default	916	911	1.01:1
MenuButtonMinimalPerf.default	1663	1650	1.01:1
SplitButtonMinimalPerf.default	3895	3875	1.01:1
CustomToolbarPrototype.default	3814	3788	1.01:1
TreeMinimalPerf.default	937	929	1.01:1
DropdownManyItemsPerf.default	774	771	1:1
ProviderMergeThemesPerf.default	1987	1979	1:1
ProviderMinimalPerf.default	992	989	1:1
SliderMinimalPerf.default	1562	1560	1:1
TableManyItemsPerf.default	2327	2330	1:1
Dropdown.Fluent	2865	2858	1:1
Image.Fluent	419	417	1:1
AttachmentMinimalPerf.default	173	174	0.99:1
ButtonUseCssPerf.default	840	850	0.99:1
Checkbox.Fluent	650	656	0.99:1
Icon.Fluent	759	767	0.99:1
Avatar.Fluent	911	934	0.98:1
StatusMinimalPerf.default	765	798	0.96:1
PortalMinimalPerf.default	156	165	0.95:1
TextAreaMinimalPerf.default	529	566	0.93:1
AlertMinimalPerf.default	307	343	0.9:1

[size-auditor]

Asset size changes

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

Baseline commit: 0fe2bfaef0b0bbf827585db9f821b3c596080d8e (build)

[msft-github-bot]

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release