Skip to main content

    CategoricalBarChart

    The CategoricalBarChart visually displays the frequencies or values of distinct categories using rectangular bars. Each bar's length or height corresponds to the quantity or value associated with a specific category, making it easy to compare the relative differences among categories.

    OverviewProperties

    CategoricalBarChartProps

    extends,
    NameTypeDefaultDescription
    data
    []
    		-

    Data object for the categorical bar chart

    height?
    |
    		300px

    Chart height. When a number is specified, is considered as pixels, otherwise a valid height string is expected.

    width?
    		-

    Chart width. A number in pixels is expected. Otherwise, it will take the full width of the container.

    layout?
    		'vertical'

    Whether the bars are displayed in a 'vertical' or 'horizontal' layout.

    groupMode?
    		'stacked'

    Strategy used for grouping the bars within a category. "stacked" will mount one on top of each other, and "grouped" will place one next to the other

    colorPalette?
    |
    		"categorical"

    Color palette to be used for the bar category.

    valueRepresentation?
    		"absolute"

    The way values are represented. "absolute" will display the value as it is, and "relative" displays a percentage value considering the other dimensions values within a category.

    seriesActions?
    (series: <, >) =>
    		-

    Category actions to be shown in the legend and tooltip actions

    truncationMode?
    		'middle'

    Truncation mode to use (start, middle, end) Applied to all the parts that truncate text.

    colorPaletteMode?
    		"single-color" - each bar gets the same color

    Mode in which bars are colored when single dimension data is shown

    loading?
    		false

    Show the loading indicator when truthy.

    CategoricalBarChart.Legend​

    To configure the legend, add CategoricalBarChart.Legend to the categorical bar chart.

    CategoricalBarChartLegendProps

    Signature:

    export declare type CategoricalBarChart = ;

    CategoricalBarChart.Tooltip​

    To configure the tooltip, add CategoricalBarChart.Tooltip to the categorical bar chart.

    CategoricalBarChartTooltipProps

    NameTypeDefaultDescription
    variant
    		-

    Tooltip variant. 'single' displays only the closest category, and 'grouped' all the category within a category.

    CategoricalBarChart.CategoryAxis​

    To configure the category axis, add CategoricalBarChart.CategoryAxis to the categorical bar chart.

    CategoricalBarChartCategoryAxisProps

    NameTypeDefaultDescription
    tickLabelLayout?
    		'horizontal'

    Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.

    label?
    		-
    maxSize?
    		-

    Max size in pixels for the category axis. Size depends on the position this axis is assigned to – left axis will use width, bottom axis will use height. If there's no enough space for this maxSize, category axis will only take the available space for it.

    CategoricalBarChart.ValueAxis​

    To configure the value axis, add CategoricalBarChart.ValueAxis to the categorical bar chart.

    CategoricalBarChartValueAxisProps

    NameTypeDefaultDescription
    label?
    		-
    min?
    		-
    max?
    		-
    formatter?
    | <, >
    		-

    Handler that is called for every tick value to be formatted.

    scale?
    		-

    The scale of the value axis.

    CategoricalBarChart.Threshold​

    CategoricalBarChart.Threshold provides a slot for defining annotations in the chart.

    CategoricalBarChartThresholdProps

    NameTypeDefaultDescription
    data
    		-

    The threshold data to be graphed by the component

    color
    		-

    The unique color picked in HEX, RGB, Color Token or HSL.

    strokeOnly?
    		-

    Whereas to show the ranges filled or only the strokes

    label?
    		"Threshold"

    Label to be shown in the threshold tooltip.

    CategoricalBarChart.EmptyState​

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

    EmptyStateProp

    NameTypeDefaultDescription
    children
    .
    		-

    CategoricalBarChart.ErrorState​

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