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,

Name	Type	Default	Description
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

Name	Type	Default	Description
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

Name	Type	Default	Description
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

Name	Type	Default	Description
label?
min?
max?
formatter?	| <, >		Handler that is called for every tick value to be formatted.
scale?			The scale of the value axis.

CategoricalBarChart.ThresholdIndicator

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

CategoricalBarChartThresholdIndicatorProps

Name	Type	Default	Description
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

Name	Type	Default	Description
children

CategoricalBarChart.ErrorState

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

ErrorStateProps

Name	Type	Default	Description
children	| ((errorMessage: ) => .)