MeterBarChart

The MeterBarChart provides a lightweight and simple visualization progress toward a completion, consumption of a total, etc. It consists of a horizontal bar that gradually fills up with color or shading as it approaches the max value.

OverviewProperties

Import

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

Use cases

The MeterBarChart expects a single value as an input. This value needs to be passed to the visualisation's value prop as a Number.

You can also provide custom min and max props to set the scale of the MeterBarChart, 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 <MeterBarChart.Min />, <MeterBarChart.Max /> and <MeterBarChart.Value /> slots, to respectively generate automatically min, max, and value labels (the formatting will be applied automatically).

Learn more about the data format here.

CodeSandbox

Object values

The MeterBarChart accepts object values in addition to numeric values. When passing an object value, a valueAccessor prop needs to be specified to indicate which field should be used as the chart's display value.

CodeSandbox

In the example above, the chart displays the value from the value field, while the ColorRule evaluates against the count field using its own valueAccessor prop. This enables conditional coloring based on different properties within the data object.

Change the chart color/s

The MeterBarChart provides several ways to customize the appearance of your data:

1. Direct Color Assignment: Set a single color for the entire bar.
2. Color Rules: Apply conditional coloring based on the bar's value.

Direct Color Assignment

The MeterBarChart has a default color for the bar segment, but 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

Using Color Rules

For more advanced coloring scenarios, you can use the ColorRule component to apply conditional coloring based on the bar's value. This is particularly useful for creating visual indicators for different value ranges.

CodeSandbox

Color rules can be applied based on the bar's value using different comparators:

• 'greater-than'
• 'less-than'
• 'greater-or-equal'
• 'less-or-equal'
• 'equals'

In the example above, we're using rules to change the bar color based on value thresholds:

• Values ≥ 80 are shown in red
• Values ≥ 60 (but < 80) are shown in orange
• Values below 60 use the default color

You can combine multiple rules to create complex coloring schemes. When multiple rules match, the most specific rule (highest matchValue for 'greater' comparators, lowest for 'less' comparators) will take precedence.

For more details about available comparators and options, see the Color Rules section.

Customize chart information

There is a set of subcomponents that can be used on the MeterBarChart to display more information about the chart: <MeterBarChart.Label>, <MeterBarChart.Value>, <MeterBarChart.Min> and <MeterBarChart.Max>.

In order to add additional context to a MeterBarChart, it's possible to use the prefixIcon prop to set a prefixed symbol as a ReactNode, consisting of an icon, emoji, single character, glyph, or Design System icon.

It will be displayed to the left of the label.

CodeSandbox

Sizing

Different sizes can be set on the MeterBarChart to display the information, using the prop size. This prop allows us to use three values: size8 (small), size16 (medium), size24 (large) and auto (dynamic - based on the parent's height). It will only affect the height of the visualization. If you don't provide any size the default will be size16.

CodeSandbox

Thresholds

Thresholds are used to mark meaningful values on a MeterBarChart. In order to set one or multiple thresholds, you can use <MeterBarChart.ThresholdIndicator> slot. You can also optionally display the threshold indicator via the showIndicator prop. By default the thresholds legend won't be shown, to enable it you can use <ThresholdLegend /> slot.

CodeSandbox

Add tooltip

The MeterBarChart has an optional Tooltip to display additional information and will be shown when the user hovers over the segment. Use the subcomponent <MeterBarChart.Tooltip> to enable it.

CodeSandbox

Series actions

A series action is a creator-defined interaction with a given data point in the chart. Basic interactions include copying a series name and inspecting the underlying data of a data point. Series actions support both synchronous and asynchronous callbacks. In order to enable chart interactions, the ChartSeriesAction subcomponent needs to be appended within the MeterBarChart. More subcomponents can be added within this component, for instance ChartSeriesAction.Item, where you can provide a custom action that will appear in the legend menu. That action can execute any custom logic in its onSelect callback or get disabled via a disabled prop. Intents could be added as part of the series action as well with ChartSeriesAction.Intent.

CodeSandbox

CodeSandbox

Formatter

The MeterBarChart 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 to allow 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 MeterBarChart also accepts custom styling, which could be set using the props className and/or style, as a regular html element

CodeSandbox