MultiMeterBarChart

The MultiMeterBarChart is a more complex version of the single meter bar, it allows for different data inputs to be considered when presenting progress toward a goal, consumption of a total, etc.

Import

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

Use cases

The MultiMeterBarChart expects one or various MultiMeterBarChart.Segment subcomponents to be rendered along with it. These subcomponents expect a value prop as a Number.

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

CodeSandbox

Change the chart color

The MultiMeterBarChart has a default color palette for the segments, but it accepts a colorPalette prop that can be set to any of predefined color palettes and it also accepts custom color palettes. See coloring for more details.

CodeSandbox

Override segment color

The MultiMeterBarChart.Segment has color prop that can be set to override the color that comes from the color palette. See coloring for more details.

CodeSandbox

Customize chart information

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

CodeSandbox

Sizing

Different sizes can be set on the MultiMeterBarChart 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, Label as well as the height of the visualization. If you dont provide any size the default will be size16.

CodeSandbox

Add Legend

Legend can be added to MultiMeterBarChart in order to add more information about the data represented by the chart. Legend is optional and can be included using the subcomponent <MultiMeterBarChart.Legend>.

CodeSandbox

The MultiMeterBarChart has an optional tooltip that displays additional information when the user hovers over a segment. Use the subcomponent <MultiMeterBarChart.Tooltip> to enable it. The tooltip variant defines whether the tooltip should contain data for all items present in the chart (shared) or only the currently selected one (single). By default, the variant is single.

CodeSandbox

Formatter

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

CodeSandbox

Props