Back to Fluentui

@fluentui/react-charts Spec

packages/charts/react-charts/library/docs/Spec.md

4.40.2-hotfix22.3 KB
Original Source

@fluentui/react-charts Spec

Background

Fluent UI React charts is a set of modern, accessible, interactive, lightweight and highly customizable visualization library representing the Microsoft design system. The charts are used across 100+ projects inside Microsoft including Microsoft 365 and Azure.

The library is built using D3 (Data Driven Documents) and fluent v9 design system.

Sample Code

Refer to the docsite for usage examples for each chart.

Migration

The v9 charts maintain feature parity with their v8 equivalent.

The following controls have been ported over to v9. For the remaining controls, refer to the migration guide to consume them in v9. https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8-components-charts-migration--docs

v8 controlv9 control
Area ChartApril 2025
Donut ChartDonut Chart
Gauge ChartApril 2025
Heatmap ChartApril 2025
Horizontal Bar ChartHorizontal Bar Chart
Horizontal Bar Chart with AxisApril 2025
Horizontal Bar Chart - StackedHorizontal Bar Chart
Horizontal Bar Chart - MultiStackedHorizontal Bar Chart
LegendsLegends
Line ChartLine Chart
Pie ChartUse Donut Chart
Sankey ChartApril 2025
Sparkline ChartSparkline Chart
Tree Chart
Vertical Bar ChartVertical Bar Chart
Vertical Bar Chart - GroupedApril 2025
Vertical Bar Chart - StackedApril 2025
Plotly Schema ChartMarch 2025

Behaviors

Refer to our technical documentation for detailed information about behavior of chart controls. https://microsoft.github.io/fluentui-charting-contrib/docs/Technical%20Details

Accessibility

Refer this document for details about Accessibility aspects for chart controls. https://microsoft.github.io/fluentui-charting-contrib/docs/Accessibility