Skip to main content

TopList

    TopListProps

    extends, , ,
    NameTypeDefaultDescription
    data
    []

    Records to display as ranked bars. Sorted by valueAccessor descending unless a custom comparator is provided. Index-keyed internally before being forwarded to the underlying chart.

    height?
    |
    300px

    Chart height. When a number is specified, it's treated as pixels, otherwise a valid CSS height string is expected.

    width?
    |
    100%

    Chart width. When a number is specified, it's treated as pixels, otherwise a valid CSS width string is expected.

    colorPalette?
    'categorical'

    Color palette for the chart.

    loading?
    false

    Show the loading indicator when truthy.

    truncationMode?
    'middle'

    Truncation mode applied to bar labels.

    labelAccessor

    Accessor for the text rendered inside each bar.

    valueAccessor

    Accessor for the numerical value that determines bar width.

    valueFormatter?
    | <, >

    Formats numerical values shown in tooltips and Y-axis tick labels.

    comparator?
    (a: , b: ) =>

    Custom comparator function for sorting data items. When omitted, data is sorted by value in descending order.

    actions?
    (datapoint: ) =>

    Callback that returns the series action menu for the hovered bar. Return a <ChartSeriesAction> tree (or a Promise of one for async menus).

    colorPaletteMode?
    'single-color'

    Controls how the color palette is applied to bars.

    • 'single-color': all bars share the same color from the palette.
    • 'multi-color': each bar gets a sequential color from the palette.
    children?

    Slot children forwarded to the internal XYChart.

    TopList.ColorRule​

    TopList.ColorRule provides a slot to apply conditional coloring to bars based on their datapoint values.

    ColorRuleProps

    Signature:

    export declare type ColorRuleProps = { valueAccessor?: ; comparator: ; matchValue: ; } & ;
    Still have questions?
    Find answers in the Dynatrace Community