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