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.

OverviewProperties

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 the total value of all segments.

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

Learn more about the data format here.

CodeSandbox

Change the chart color/s

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

1. Predefined Color Palettes: Choose from a set of built-in color palettes.
2. Custom Colors: Define your own color schemes for individual segments.
3. Color Rules: Apply conditional coloring based on data values or segment names.

Using Color Palettes

The MultiMeterBarChart has a default color palette for the segments. This could be changed with the 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

Using Color Rules

For more advanced coloring scenarios, you can use the ColorRule component to apply conditional coloring based on your data values. This is particularly useful for highlighting specific segments or applying business logic to your visualizations.

CodeSandbox

Color rules can be applied based on different criteria:

• Value-based rules: Apply colors based on segment values using comparators like 'greater-than', 'less-than', etc.
• Name-based rules: Match segment names using 'starts-with', 'ends-with', or 'matches-phrase' comparators
• Multiple rules: Combine multiple rules for complex coloring logic

In the example above, we're using several rules:

1. Color any segment with a value ≥ 0 using the 'swamps' color palette
2. Color any segment with a value ≥ 30 in red
3. Color any segment whose name starts with "Poor" in rebeccapurple

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 MultiMeterBarChart to display more information about the chart: <MultiMeterBarChart.Label>, <MultiMeterBarChart.Value>, <MultiMeterBarChart.Min> and <MultiMeterBarChart.Max>.

In order to add additional context to a MultiMeterBarChart, 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 MultiMeterBarChart to display the information, using the prop size. This prop allows us to use four 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 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

Add tooltip

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

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