apps/chart-docsite/src/Introduction.mdx
import { Meta } from '@storybook/addon-docs/blocks';
<Meta title="Introduction" />Fluent UI React charts is a set of modern, accessible, interactive, lightweight and highly customizable visualization library representing the Microsoft design system. These charts are used across 100s of projects inside Microsoft across Microsoft 365, Copilot and Azure.
The library is built using D3 (Data Driven Documents) and fluent v9 design system.
To get started with the charts package in your project:
Install the desired package using npm or yarn:
npm install @fluentui/react-charts
| Chart | Fluent v8 | Fluent v9 | Fluent Web Component |
|---|---|---|---|
| Documentation | Link | Link | Link |
| AreaChart | Stable | Stable | Planned |
| DonutChart | Stable | Stable | Stable |
| GaugeChart | Stable | Stable | Planned |
| HeatMapChart | Stable | Stable | Planned |
| HorizontalBarChart | Stable | Stable | Stable |
| HorizontalBarChart with Axis | Stable | Stable | Planned |
| HorizontalBarChart Stacked | Stable | HorizontalBarChart | HorizontalBarChart |
| HorizontalBarChart MultiStacked | Stable | HorizontalBarChart | HorizontalBarChart |
| Legends | Stable | Stable | Planned |
| LineChart | Stable | Stable | Planned |
| PieChart | Stable | Use donut chart | Use donut chart |
| SankeyChart | Stable | Stable | Planned |
| Sparkline | Stable | Stable | - |
| TreeChart | Stable | - | - |
| VerticalBarChart | Stable | Stable | Planned |
| VerticalBarChart Grouped | Stable | Stable | Planned |
| VerticalBarChart Stacked | Stable | Stable | Planned |
| Plotly Schema Chart (new) | Stable | Stable | - |
| Scatter Chart (new) | Stable | Stable | - |
| Gantt Chart (new) | June 2025 | July 2025 | - |
Follow this guide to use v8 charts in fluent v9 till v9 charts are released.
The charting project is actively funded by a small feature team. The team responds within 1-2 business days for any queries or doubts.
You can reach out to the charting team by tagging @microsoft/charting-team in discussion items.
You could also create issues using the charting template.
Refer the main fluentui wiki for detailed instructions on setup and contributing to the package.
A comprehensive contributor and technical guide is available on the charts wiki.
Several resources are available to know more details about the charts library.
Published roadmap here
Detailed wiki
Join our discord server for realtime conversation and schedule to our office hours.
Figma designs - Contact us for details.
Our charts are among the very few charting solutions providing elaborate accessibility support. The charts are WCAG 2.1 MAS C compliant for accessibility.
More details are covered in the wiki.