Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@fluentui/react-charting

Package Overview
Dependencies
Maintainers
0
Versions
672
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fluentui/react-charting

React web charting controls for Microsoft fluentui system.

  • 5.23.40
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.9K
increased by34.51%
Maintainers
0
Weekly downloads
 
Created
Source

@fluentui/react-charting

npm version Build Status

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

contributions welcome

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

Test Coverage Badge

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 NoScenarioLighthouse Score
1.1 LineChart of 1 series with 30,000 datapoints79.2
2.6 LineCharts of 1 series with 100 datapoints each98.8
3.18 LineCharts of 1 series with 5 datapoints98
4.50 Linecharts of 1 Series with 10 datapoints each89.6
5.1 Linechart of 2 series with 500 datapoints each98.6
6.10 Linecharts of 1 series with 1000 datapoints each94.4
7.1 Areachart with 30,000 datapoints70
8.6 Areacharts of 1 series with 100 datapoints each95.4
9.18 Areacharts of 1 series with 5 data points each96.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.

FAQs

Package last updated on 13 Jan 2025

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc