DOCSEARCHbyAlgolia
Submit Docs

Fluent UI React Charting

website·Indexed 30 days ago

https://microsoft.github.io/fluentui-charting-contrib/

A set of modern, accessible, interactive, and lightweight charting components for Fluent UI React (formerly Office UI Fabric React). The library includes various data visualizations such as Donut, Sankey, Heatmap, Vertical Bar, and Stacked Bar charts, providing detailed implementation guides, technical specifications, and comprehensive test plans for components like @fluentui/react-charting.

Tokens
45.7K
Snippets
67
Records
503
Agent score
73%

What's inside Fluent UI Charting

  1. Overview of Stacked Bar Chart components

    The StackedBarChart is a data visualization component where rectangular bars are divided into segments representing different categories. Key internal components include:

    • StackedBarChart: The main orchestrator for rendering bars, titles, labels, and indicators.
    • FocusZone: Manages keyboard navigation (Tab/Arrow keys) between bars and segments.
    • FocusableTooltipText: Handles bar titles with automatic ellipsis truncation and tooltips for overflowing text.
    • Legends: A list of strings identifying segments; supports highlighting segments via hover or selection.
    • Callout & ChartHoverCard: Provides anchored, non-blocking detailed information about a hovered or focused bar segment.
    • Benchmark & Target indicators: Visual reference points used to compare bar values against a specific goal (supported in Stacked Bar Chart, but not Multi-Stacked).

  2. Overview of Fluent UI Area Chart

    The Area Chart is a graphical representation of quantitative data points connected by lines and filled with colors. It is primarily used for trend analysis, cumulative data visualization, comparing multiple series, part-to-whole relationships, and forecasting. The component is built using d3-shape (specifically d3-line and d3-area) and utilizes curveLinear for interpolation between points.

  3. Overview of Vertical Bar Chart capabilities

    The Vertical Bar Chart displays data as a series of vertical bars where the height represents the value of a category. It is primarily used for comparing values across categories, showing data trends over time, or highlighting extremes (highest/lowest values) in a dataset. The component can also overlay a line chart to represent trend lines or target values, allowing for a comparison between actual and target metrics.

  4. Overview of Sparkline Chart

    A Sparkline chart is a compact, simple visualization used to display trends over time or changes in data, typically within dashboards or reports where space is limited. It consists of a line representing the trend and an area representing the data range. Common use cases include tracking stock prices, website traffic, comparing multiple data sets side-by-side, and providing quick status overviews of project progress.

  5. Overview of Vertical Stacked Bar Charts

    A vertical stacked bar chart displays multiple data series as stacked bars. Each bar represents a category on the x-axis, and the total height of the bar represents the aggregate value of all series for that category. Individual segments within a bar represent different series and are typically color-coded to differentiate them.

    Common use cases include:

    • Comparing total sizes of categories over time.
    • Analyzing the composition of a category into subcategories.
    • Identifying trends in data distribution over time.
    • Comparing relative sizes of categories at a single point in time.
    • Highlighting the contribution of subcategories to a whole.

  6. Overview of the Gauge Chart component

    The Gauge Chart is used to measure the progress of a metric against a target. It consists of a speedometer (color-coded segments) and a needle that indicates the current value within a specific range. Common use cases include KPI tracking, performance monitoring, health parameters, and project progress visualization.

  7. Overview of Grouped Vertical Bar Chart

    A grouped vertical bar chart displays multiple data series as groups of bars. Each group represents a category on the x-axis, and each bar within that group represents a different series, distinguished by color. The y-axis represents the numerical values of the series. This chart type is ideal for comparing multiple series across different categories, such as comparing revenue and expenses across different products.

  8. Understand Sankey Chart components and data structure

    A Sankey chart visualizes the flow of resources, energy, or information. It consists of two primary components:

    1. Nodes: Represent categories or stages. They are rendered as rectangles. The height of a node is calculated from the difference between its y1 and y0 properties. If the height is too small, a 6px padding is added between the node description and weight.
    2. Links: Represent the flow between a source node and a target node. The width of the link is proportional to the flow value. Links are rendered as smooth curves using d3CurveBasis and feature linear gradients transitioning from the source node color to the target node color.

  9. Understand Area Chart component architecture

    The Area Chart is composed of several internal utility components:

    • Area Chart (Main): The primary component that manages the area creation, legends, and user interactions.
    • Cartesian Chart: Handles the creation of X and Y axes, axis ticks, and domain/range calculations. It also manages the ChartHoverCard.
    • ChartHoverCard: A React utility providing a tooltip-like experience to display additional data point information on hover.
    • Legends: A component that lists variables appearing in the chart with visual examples to identify data series.

  10. Understand the Fluent UI Charting library project structure

    The Fluent UI Charting library is located in the package/react-charting directory. The project is organized as follows:

    • src/: Contains the source code.
    • src/components/: Contains the implementation for individual chart components.
    • src/components/CommonComponents/: Contains the CartesianChart implementation, which serves as the base common component for all axis-based charts.
    • docs/: Contains design documentation and RFCs for recent functionalities.
    • Test files: Located alongside implementation files and identified by the .test.tsx extension.

  11. Navigate the chart component release lifecycle

    New major components follow a specific progression to stability:

    1. POC: Overlaps with design phases to align with the library's overall architecture. Requires a formal review from the charting team.
    2. Implementation: The actual coding phase.
    3. Pilot (Unstable): Released as an unstable component to a partner customer to identify bugs and refine external interfaces.
    4. Stable Release: Once marked stable, the component cannot have breaking changes until the next major library release.

  12. Line Chart architectural components

    The Line Chart is composed of several integrated components:

    • Line Chart (Main): The primary component that manages lines, event annotations, gaps, and user interactions.
    • Cartesian Chart: Handles the X and Y axes, axis ticks, and domain/range calculations. It also manages the ChartHoverCard.
    • ChartHoverCard: A React utility providing a tooltip-like experience to display additional data point information on hover.
    • Legends: Displays a list of variables in the chart with visual examples to identify data series.