Back to Fluentui

GaugeChartOverview

packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartOverview.md

4.40.2-hotfix21.0 KB
Original Source

A radial gauge chart uses a circular arc to show how a single value progresses toward a goal or a Key Performance Indicator (KPI). The gauge line (or needle) represents the goal or target value. The shading represents progress toward the goal. The value inside the arc represents the progress value.

There are two types of gauge charts: Speedometer and rating meter.

The speedometer measures a numerical value against a whole, like storage capacity. The needle is an optional component. The color of the segment representing the value being measured can be customized by product teams to suit certain scenarios or to align with branding colors.

The rating meter shows status of the current value within a few predefined ranges or segments. The needle is a required component here.

The segment sizes and colors can be customized by the product team to suit their needs.

Refer to this Readme on how to start using the @fluentui/react-charting library.