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
,
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. |
CategoricalBarChart.Threshold
CategoricalBarChart.Threshold
provides a slot for defining annotations in the
chart.
CategoricalBarChartThresholdProps
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: ) => .) | - |