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.

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).

CodeSandbox

Change the chart color

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

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.Icon>, <MeterBarChart.Min> and <MeterBarChart.Max>.

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), and size24 (large). It will affect the Value, Icon, and Label as well as 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 <Thresholds> and <Threshold> 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

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

Props

MeterBarChartProps

extends

Name	Type	Default	Description
value		-	Value of the meter bar segment
min?		-	Min value for the meter bar chart scale.
max?		-	Max value for the meter bar chart scale.
color?		-	Color of the meter bar segment. If not provided, it will display a default color.
size?		-	The size that applies to the value, icon, and label.
name?		-	Segment name. If not provided, it will display a default name.
formatter?	| <, >	-	Custom Formatter for the chart

MeterBarChartThresholdProps

Name	Type	Default	Description
name?		-	Name of the threshold displayed in the threshold legend.
color		-	The color of the threshold.
value		-	The value of the threshold.
showIndicator?		-	When set to true, it shows the indicator of the threshold.