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? | | | 100% | Chart width. When a number is specified, it's treated as pixels, otherwise a valid width string is expected. |
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: ) => .) | |
CategoricalBarChart.Intent
CategoricalBarChart.Intent provides a slot to set intents that will appear in
the toolbar.
IntentProps
Signature:
export declare type IntentProps = | ;CategoricalBarChart.ColorRule
CategoricalBarChart.ColorRule provides a slot to apply conditional coloring to
your chart series based on their values or names.
ColorRuleProps
Signature:
export declare type ColorRuleProps = {
valueAccessor?: ;
comparator: ;
matchValue: ;
} & ;CategoricalBarChart.toolbar
The CategoricalBarChart.toolbar slot allows you to customize or hide the
chart's toolbar.
CompactToolbarProps
Signature:
export declare type CompactToolbarProps = & {
hidden?: ;
placement?: [];
};CategoricalBarChart.DownloadCSV
The CategoricalBarChart.DownloadCSV slot allows users to download the data as
a CSV file.