Bar Chart
A bar chart component is a visual representation using rectangular bars to compare quantities across different categories or time periods.
Props#
BarChart#
| Prop | Type | Default | Description |
|---|---|---|---|
datarequired | Record<string, string | number>[] | The data to be displayed in the chart. | |
| allowDecimals | boolean | Show decimals on the y-axis. | |
| animationDuration | number | Animation duration in milliseconds. | |
| barCategoryGap | string | number | Gap between categories in pixels or percentage. | |
| barGap | string | number | Gap between bars in pixels or percentage. | |
| categories | string[] | The data keys to be displayed in the chart. | |
| children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | Children to render. | |
| colors | string[] | The colors to use for each category. | |
| height | ResponsiveValue<number | "px" | (string & {}) | "max" | "min" | "auto" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | ... 56 more ... | "container.2xl"> | The height of the chart. | |
| index | string | 'date' | The y-axis data key to use. |
| intervalType | type ONLY_FOR_FORMAT =
| number
| "preserveStartEnd"
| "equidistantPreserveStart"
| "preserveStart"
| "preserveEnd" | If set 0, all the ticks will be shown. If set preserveStart", "preserveEnd" or "preserveStartEnd", the ticks which is to be shown or hidden will be calculated automatically. | |
| legendHeight | number | Height of the legend. | |
| radius | number | [number, number, number, number] | Radius of the bars. | |
| showAnimation | boolean | Wether to show the animation or not. | |
| showGrid | boolean | Wether to show the grid or not. | |
| showLegend | boolean | Wether to show the legend or not. | |
| showTooltip | boolean | Wether to show the tooltip or not. | |
| showXAxis | boolean | Wether to show the x-axis or not. | |
| showYAxis | boolean | Wether to show the y-axis or not. | |
| stack | boolean | Whether to stack the bars. | |
| startEndOnly | boolean | Only show the start and end ticks on the x-axis. | |
| tooltipContent | (props: TooltipProps<any, any>) => ReactNode | Render custom tooltip content. | |
| valueFormatter | (value: number) => string | Format the value of the x-axis. | |
| variant | "solid" | "gradient" | gradient | The bar chart variant. |
| yAxisWidth | number | Width of the y-axis labels. |
Was this helpful?