TopList

OverviewProperties

Import

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

Overview

A TopList is a chart that displays a ranked list of items as horizontal bars with a label inside each bar—essentially a horizontal bar chart optimized for showing top-N rankings. For full control over axis configuration, coloring rules, or layout direction, use XYChart.BarSeries directly.

Data

TopList requires three props that describe the shape of each record in data.

• data: an array of plain objects—each object represents one bar. Field names are unrestricted; you choose them and reference them via the accessors below.
• valueAccessor: the string key whose value is the numerical value that determines bar length.
• labelAccessor: the string key whose value is the text shown inside each bar.

Formatter

The valueFormatter formats the numerical values shown on the Y-axis tick labels and in tooltips. It accepts either a plain function (value) => string or an SDK FormatOptions object for unit conversion.

Coloring

TopList supports a colorPalette prop that applies to the whole chart. It accepts a predefined palette name (e.g. 'categorical', 'rainbow') or a custom array of hex strings. The default palette is 'categorical'.

Color palette mode

Use the colorPaletteMode prop to control how the palette colors are applied to bars. 'single-color' (default) applies the first palette color to all bars. 'multi-color' assigns each bar a sequential color from the palette.

Use color rules

For more advanced coloring scenarios, you can use the TopList.ColorRule slot to apply conditional coloring based on your data values. Each rule is evaluated per datapoint and, when multiple rules match, the last one wins.

For more details about using color rules, see the Color Rules section.

Sorting

By default TopList sorts bars from highest to lowest value (descending). You can pass a comparator function to override this.

Series actions

A series action provides a context menu for each bar when hovered. Pass an actions callback to TopList—it receives the original data record for the hovered bar and must return a <ChartSeriesAction> element (or a Promise of one for async menus). Use ChartSeriesAction.Item to add custom entries with an optional icon, onSelect handler, or disabled state. Intents can be added with ChartSeriesAction.Intent.

Tooltip

When hovering a bar, the tooltip shows the label and the formatted numeric value (via valueFormatter, if provided) in the body.

Size

The height prop accepts a pixel number or any valid CSS size string (e.g. '300px', '50%'). When the items do not fit inside the provided height, the chart becomes vertically scrollable automatically.