Skip to main content

    TreeMap

    The TreeMap visualizes the distribution of hierarchical data. It uses nested rectangles of different sizes and colors to show how much each category or subcategory contributes to the whole data set.

    TreeMapProps

    extends, ,
    NameTypeDefaultDescription
    data
    -

    The tree map data to display.

    width?
    100%

    Optional width of the chart.

    height?
    |
    400

    Optional height of the chart.

    colorPalette?
    | | []
    'categorical'

    Color palette to use for coloring the tree nodes. Nodes of height 1 get a color assigned from the palette.

    formatter?
    | <, >
    -

    Custom value formatter for the chart.

    truncationMode?
    'middle'

    The text truncation mode used for the chart legend.

    loading?
    false

    Show the loading indicator.

    labelsDisplay?
    'none'

    Show/hide label on TreeMap nodes and clusters

    seriesActions?
    (node: ) =>
    -

    Exposed callback to display series actions for a node

    valueAccessor?
    undefined

    Data accessor on leaf nodes by which legend can be defined

    nameAccessor?
    undefined

    Data accessor on leaf nodes by which legend can be defined

    min?
    |
    -

    The min value configuration to display

    max?
    |
    -

    The max value configuration to display

    TreeMap.Legend

    To configure the legend, add TreeMap.Legend to the TreeMap chart.

    TreemapChartLegendConfig

    Signature:

    export declare type TreemapChartLegendConfig = ;

    TreeMap.Tooltip

    To configure the tooltip, add TreeMap.Tooltip to the TreeMap chart.

    TreeMap.EmptyState

    TreeMap.EmptyState provides a slot where the Empty state wrapper can be set.

    EmptyStateProp

    NameTypeDefaultDescription
    children
    .
    -

    TreeMap.ErrorStateSlotProps

    TreeMap.ErrorState provides a slot where the Error state wrapper can be set.

    ErrorStateProps

    NameTypeDefaultDescription
    children
    . | ((errorMessage: ) => .)
    -
    Still have questions?
    Find answers in the Dynatrace Community