@fluentui/react-charting

@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

More details are covered in the wiki.

Versioning and changelog

We use SemVer for versioning. For the versions available, see the tags on this repository.

Refer to the changelog for details about changes made in each version.

Coding Guidelines

Refer fluent Coding guidelines

Technical details

Refer this document for details on color palette, theming, types of axis supported and more.