@fluentui/react-charts

React Charts components for Fluent UI React

Fluent charts is a set of modern, accessible, interactive and highly customizable visualization library representing the Microsoft design system. The library is built using D3 (Data Driven Documents) and fluent v9 design system.

Using the library

Examples and code snippets for the chart components are available on the doc site. The code snippets can be used as usage guide for all the props and chart variations.

Available charts across fluent platforms

<table> <tr> <th>Chart</th> <th>Fluent v8</th> <th>Fluent v9</th> <th>Fluent Web Component</th> </tr> <tr> <td>Documentation</td> <td>[Link](https://aka.ms/fluentcharting)</td> <td>[Link](https://react.fluentui.dev/?path=/docs/charts_introduction--docs)</td> <td>[Link](https://github.com/microsoft/fluentui/tree/master/packages/charts/chart-web-components#readme)</td> </tr> <tr> <td>AreaChart</td> <td>Stable</td> <td>April 2025</td> <td>Planned</td> </tr> <tr> <td>DonutChart</td> <td>Stable</td> <td>Stable</td> <td>Planned</td> </tr> <tr> <td>GaugeChart</td> <td>Stable</td> <td>March 2025</td> <td>Planned</td> </tr> <tr> <td>HeatMapChart</td> <td>Stable</td> <td>April 2025</td> <td>Planned</td> </tr> <tr> <td>HorizontalBarChart</td> <td>Stable</td> <td>Stable</td> <td>Stable</td> </tr> <tr> <td>HorizontalBarChart with Axis</td> <td>Stable</td> <td>April 2025</td> <td>Planned</td> </tr> <tr> <td>HorizontalBarChart Stacked</td> <td>Stable</td> <td>June 2025</td> <td>Stable</td> </tr> <tr> <td>HorizontalBarChart MultiStacked</td> <td>Stable</td> <td>June 2025</td> <td>Planned</td> </tr> <tr> <td>Legends</td> <td>Stable</td> <td>Stable</td> <td>Planned</td> </tr> <tr> <td>LineChart</td> <td>Stable</td> <td>Stable</td> <td>Planned</td> </tr> <tr> <td>PieChart</td> <td>Stable</td> <td>Use donut chart</td> <td>Use donut chart</td> </tr> <tr> <td>SankeyChart</td> <td>Stable</td> <td>April 2025</td> <td>Planned</td> </tr> <tr> <td>Sparkline</td> <td>Stable</td> <td>Stable</td> <td>-</td> </tr> <tr> <td>TreeChart</td> <td>Stable</td> <td>-</td> <td>-</td> </tr> <tr> <td>VerticalBarChart</td> <td>Stable</td> <td>Stable</td> <td>Planned</td> </tr> <tr> <td>VerticalBarChart Grouped</td> <td>Stable</td> <td>April 2025</td> <td>Planned</td> </tr> <tr> <td>VerticalBarChart Stacked</td> <td>Stable</td> <td>Preview</td> <td>Planned</td> </tr> <tr> <td>Plotly schema Chart (new)</td> <td>Stable</td> <td>March 2025</td> <td>-</td> </tr> <tr> <td>Scatter Chart (new)</td> <td>-</td> <td>June 2025</td> <td>-</td> </tr> <tr> <td>Gantt Chart (new)</td> <td>-</td> <td>June 2025</td> <td>-</td> </tr> </table>

Using v8 charts in fluent v9

Follow this guide to use v8 charts in fluent v9 till v9 charts are released.

Contact

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.

Contributing

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.

Resources

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.

Accessibility

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.