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/charts';

Demo

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.

Object values

Each MultiMeterBarChart.Segment accepts object values in addition to numeric values. When passing an object value to a segment, a valueAccessor prop needs to be specified on that segment to indicate which field should be used as the segment's display value.

In the example above, each segment displays its value from the value field. ColorRules can use their own valueAccessor prop to evaluate conditions against different properties in the data object, such as count or priority. ColorRules can also access segment properties like name by setting valueAccessor="name".

Change chart colors

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.

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

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.

Use color rules

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

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.

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.

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

Tooltip

The MultiMeterBarChart shows a tooltip by default when the user hovers over a segment. Use <MultiMeterBarChart.Tooltip> to customize it — the variant prop controls whether the tooltip shows data for all segments (shared) or only the hovered one (single, default). Set hidden to hide the tooltip.

You can fully control the tooltip content by passing a render function as the children of <MultiMeterBarChart.Tooltip>. The function receives a MultiMeterBarChartTooltipPayload and must return a ReactNode. When provided, the built-in layout is replaced entirely and the variant prop is ignored — the template itself decides which data to display. Use ChartTooltip primitives to keep a consistent visual style.

The MultiMeterBarChartTooltipPayload contains:

• segments — all visible segments, each with name, value, and color
• activeSegment (optional) — the segment under the cursor, with an additional index identifying its position in the segments array

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.

Toolbar behavioral tracking

The MultiMeterBarChart.Toolbar subcomponent supports behavioral tracking attributes that are spread onto the toolbar root element. This allows tracking of toolbar interactions such as menu opens, mode changes, and download actions.

Pass any data-dt-* attributes directly on MultiMeterBarChart.Toolbar to attach tracking metadata. See BehaviorTrackingProps for the full list of supported attributes.

Intent options

The MultiMeterBarChart supports intent options in the toolbar. The intents appear in the toolbar's dropdown menu, allowing users to perform actions such as sharing a chart or viewing data in another application.

When a single intent is configured and no download button is shown, the intent appears directly in the toolbar. When multiple intents are configured, or when both an intent and a download button are present, they are grouped under a More options submenu.

To add intent options to a MultiMeterBarChart, use the MultiMeterBarChart.Intent subcomponent:

Intent properties

• payload: An object containing the data to be passed to the target app. The structure depends on the target application's requirements.
• options: Configuration options for the intent.
• keyProperties: Array of properties that should be included as keys in the intent.
• recommendedAppId: Suggested target application ID.
• recommendedIntentId: Suggested intent ID.
• responseProperties: Array of properties to be included in the response.
• icon: Optional custom icon to be displayed next to the intent option.
• onResponse: Optional callback function that is called when a response is received from the target app.

Examples

The following examples demonstrate different intent options in MultiMeterBarChart:

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.

Styling

The MultiMeterBarChart also accepts custom styling, which could be set using the props className and/or style, as a regular html element