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.

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.

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