@fluentui/react-charting
Overview
Fluent UI React (formerly Office UI Fabric React) charts is a set of modern, accessible, interactive and highly customizable visualization library representing the Microsoft design system.
The charting library is built using D3 (Data Driven Documents) and other fluent UI controls.
These charts are used across different products in Microsoft. They are ready to be used in a production environment.
This library is also supported for fluent UI v7.
Using the library
Examples and code snippets for the charting library are available on the demo site. The code snippets can be used as usage guide for all the props and chart variations. Click on 'Show code' on the demo site to access demo for each variant.
The library is published as a npm package to public npm feed. To install the package
npm install @fluentui/react-charting
To import charting components:
import { ComponentName } from '@fluentui/react-charting/lib/ComponentName';
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 under the charting tag.
Resources
Several resources are available to know more details about the charting project.
Published roadmap here
Detailed wiki (Internal to Microsoft Employees currently)
Join our discord server for realtime conversation and schedule to our regular office hours.
Official codepen account - Coming soon
Figma design guidance - Coming soon
Contributing
Refer the main fluentui wiki for detailed instructions on setup and contributing to the package.
A comprehensive contributor guide is available in our internal wiki. Available to share publically on request.
Testing
The library has a wide variety of tests to ensure quality of the library. The tests range from component tests, unit tests, visual regression tests, accessibility tests, integration tests and manual tests. The test automations aim to ensure over 90% code coverage across the library.
Further details available in the wiki
Run yarn test from within the package to run all the tests.
Accessibility
Our charts have elaborate accessibility support. The charts are WCAG 2.1 MAS C compliant for accessibility.
More details are covered in the wiki.
Performance
Performance is a key success criteria for the charting library. Performance is measured and has been improved for the following scenarios.
| S No | Scenario | Lighthouse Score |
|---|---|---|
| 1. | 1 LineChart of 1 series with 30,000 datapoints | 79.2 |
| 2. | 6 LineCharts of 1 series with 100 datapoints each | 98.8 |
| 3. | 18 LineCharts of 1 series with 5 datapoints | 98 |
| 4. | 50 Linecharts of 1 Series with 10 datapoints each | 89.6 |
| 5. | 1 Linechart of 2 series with 500 datapoints each | 98.6 |
| 6. | 10 Linecharts of 1 series with 1000 datapoints each | 94.4 |
| 7. | 1 Areachart with 30,000 datapoints | 70 |
| 8. | 6 Areacharts of 1 series with 100 datapoints each | 95.4 |
| 9. | 18 Areacharts of 1 series with 5 data points each | 96.8 |