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.

Demo

Data

TopList requires four props that describe the shape of each record in data. With just these four, all bars will belong to a single series.

• 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.
• categoryAccessor: the string key whose value is the unique identifier for each bar. Must be unique per row.
• 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.

The following accessors are optional:

• seriesIdAccessor: when provided, groups records into multiple series—each unique value becomes its own series.
• seriesNameAccessor: the display name shown in the legend and tooltip for each series. Only meaningful when seriesIdAccessor is also provided.

Single series

Multiple series

Formatters

categoryFormatter

Formats the labels shown next to each bar. The callback receives the raw category string and the full data record, which lets you derive the label from any field in the row.

valueFormatter

Formats the numerical values shown in tooltips. It accepts either a plain function (value) => string or an SDK FormatOptions object for unit conversion.

Both formatters are independent and can be combined—categoryFormatter controls the axis labels while valueFormatter controls the tooltip values.

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

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.

Tooltip and legend

The seriesIdAccessor controls both the legend and the tooltip layout:

• When no seriesIdAccessor is provided — TopList treats all records as a single series and hides the legend automatically. The labelAccessor value is shown under the series section in the tooltip body.
• When seriesIdAccessor is provided — each unique value becomes its own series, the legend is shown, and the labelAccessor value is used as the tooltip header.

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.