GaugeChart

A Gauge Chart is a circular chart that displays information on a numeric scale. It's great for showing performance metrics or progress towards a goal.

OverviewProperties

Import

import { GaugeChart } from '@dynatrace/strato-components-preview/charts';

Use cases

The GaugeChart expects a numerical value as an input. This value needs to be passed to the visualization's value prop as a Number.

You can also provide custom min and max props to set the scale of the GaugeChart, and if none are provided, the default min will be 0 and max will be 100.

Learn more about the data format here.

CodeSandbox

Change the chart color

The GaugeChart allows the user to customize an arc with a custom color. It accepts a color prop that can be set to any valid color string that utilizes a format supported by web browsers, including RGB, HSL and HEX.

CodeSandbox

Customize chart information

There are some subcomponents that can be used on the GaugeChart to display more information about the chart: <GaugeChart.Label> and <GaugeChart.Threshold>.There are three ways to configure the <GaugeChart.Label> slot:

1. No slot is defined: The component does not display any labels.
2. Slot is defined without a child component: The component automatically generates default labels using the min, max, and value props, applying the specified formatter prop for consistent formatting.
3. Slot is defined with a child component: The provided child component is used directly as the label, and no automatic formatting is applied.

CodeSandbox

Add more context to a GaugeChart

To provide additional context in a GaugeChart, you can enhance it with icons or emojis using the prefixIcon prop. This prop accepts a ReactNode, allowing you to display a symbol—such as an icon, emoji, single character, glyph, or a Design System icon—before the value. The symbol will appear to the left of the chart’s value.

CodeSandbox

Sizing

Different sizes can be set on the GaugeChart to display the information. By default, the chart will use all the available container size up to a maximum height of 300 pixels. This maximum height can be changed by providing a value in the height prop of the GaugeChart. If a number is passed to this prop without any unit specified, it will be treated as px. You can also specify the width prop, and it works in the same way.

Resizing the chart will especially affect the label. If a string is provided to the label slot, both the arc and the strings will grow accordingly. However, size will not be affected if another type of element is provided as label, but size can be modified manually. The arc will resize either way.

CodeSandbox

Thresholds

Thresholds are used to mark meaningful values on a GaugeChart. In order to set one or multiple thresholds, you can use the <GaugeChart.Threshold> slot. These Thresholds have a value prop to define them. You can also optionally display the threshold indicator via the showIndicator prop and customize their color by using the prop color.

CodeSandbox

Formatter

The GaugeChart has a formatter prop that accepts any function to provide format to the relevant chart values. One of the uses of this formatter can be to attach a custom unit or string to the value. The default formatter shows the value without any format.

Additionally, there is a custom formatter option available that allows you to change the input unit to one of your choice, e.g.: if the input unit is bits, you are able to switch and display the unit as bytes, correctly formatted. The formatted value will appear in the chart tooltip. The use cases below outline each of these scenarios.

CodeSandbox

Styling

The GaugeChart also accepts custom styling, which could be set using the props className and/or style, as a regular html element.

CodeSandbox