@fluentui/react-charting
Advanced tools
React web charting controls for Microsoft fluentui system.
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.
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';
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.
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
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.
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.
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 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.
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.
Refer fluent Coding guidelines
Refer this document for details on color palette, theming, types of axis supported and more.
FAQs
React web charting controls for Microsoft fluentui system.
The npm package @fluentui/react-charting receives a total of 2,371 weekly downloads. As such, @fluentui/react-charting popularity was classified as popular.
We found that @fluentui/react-charting demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
