Fluent UI Charting — Data Visualization Knowledge Base

Overview

@fluentui/react-charting is Microsoft's official charting library for Fluent UI React applications. Built on top of D3.js, it provides a comprehensive set of chart components that integrate seamlessly with the Fluent design system, including automatic theming, accessibility support, and responsive behavior out of the box.

The library is designed for dashboards, reports, and data-rich applications within the Microsoft 365 ecosystem and beyond. Every chart component respects Fluent design tokens, supports light/dark/high-contrast themes, and provides keyboard navigation and screen reader announcements.

Key characteristics:

• Built on D3.js for powerful SVG-based rendering
• Fluent-themed by default — inherits colors, typography, and spacing from FluentProvider
• Accessible — WCAG 2.1 AA compliant with ARIA labels, keyboard nav, and high-contrast support
• Responsive — charts resize to fit their container
• TypeScript-first — full type definitions for all props and data structures