Bar Chart
A bar chart is a graphical representation that displays and compares discrete data categories using rectangular bars. Each bar's length or height is proportional to the frequency or value of its corresponding category, allowing users to identify which groups are the highest or most common and compare them with others.
| Name | Type | Description | Default |
|---|---|---|---|
| chartTitle | string | Title of the chart. | - |
| error | string | Error state of the chart. If set, the component will display an error message with a retry action. | - |
| horizontalBars | boolean | When set to true, the x and y axes are swapped, resulting in bars being displayed horizontally rather than vertically. This feature is applicable only when the chart contains exclusively bar series. | false |
| legendTitle | string | Title of the chart legend. | - |
| loading | boolean | If true, activates the loading state of the component. | false |
| onFilterChange | (visibleSeries: string[]) => void | This function will be called when the user changes the displayed data series with the default filter. This event is only triggered when showFilter is set to true. | - |
| onHighlightChange | (highlightedSeries?: string) => void | This function will be called when the user hovers over a data series through the chart legend. This event is only triggered when showLegend is set to true. | - |
| onRetry | () => void | This function will be called when the user clicks the retry action in the error state. A DxcButton component will be displayed if this prop is defined to perform the action. | - |
| series | ({
title: string;
type: "threshold";
y?: number;
x?: number | string;
} | {
title: string;
type: "bar";
data: ({
x: number | string;
y: number
})[];
})[] | An array of objects representing the data series to be displayed in the chart. | - |
| showFilter | boolean | If true, the chart will display a filter to allow the user to change the displayed data series. | false |
| showLegend | boolean | If true, the chart will display a legend with the data series information. | false |
| stackedBars | boolean | If true, bars in the same data point are stacked instead of being grouped next to each other. | false |
| xDomain | (number | string)[] | Specifies the x-axis domain, defining the visible range. For numerical data, use a tuple: [minValue, maxValue]. For categorical data, use an array of category strings. Explicitly setting this is recommended. If not set, the component will auto-fit all data points. | - |
| xFormatter | (value: number | string) => string | Function to format the displayed label of an x-axis mark. | - |
| xTitle | string | Title of the x axis. | - |
| yDomain | [number, number] | Specifies the y-axis domain, defining the visible range. The domain is defined by a tuple: [minValue, maxValue]. Explicitly setting this is recommended. If not set, the component will auto-fit all data points. | - |
| yFormatter | (value: number | string) => string | Function to format the displayed label of an y-axis mark. | - |
| yTitle | string | Title of the y axis. | - |