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.

It is also possible to delegate the component to generate the labels by setting <GaugeChart.MinLabel />, <GaugeChart.MaxLabel /> and <GaugeChart.ValueLabel /> slots to respectively generate min, max, and value labels (the formatting will be applied automatically).

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 is a set of subcomponents that can be used on the GaugeChart to display more information about the chart: <GaugeChart.Label>, <GaugeChart.ValueLabel>, <GaugeChart.MinLabel>, <GaugeChart.MaxLabel> and <GaugeChart.Threshold>. There are three different situations:

1. No label slot is defined. In this case, no label is added to the chart.
2. The label slot is defined without a child component. In this case the min, max, and value props are used along with the formatter to generate the default labels.
3. The label slot is defined with a child component. In this case the child component is used as it is (no formatting is applied).

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 valueLabel and label slots. If strings are provided in these slots, both the arc and the strings will grow accordingly. However, size will not be affected if another type of element is provided as valueLabel or 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