data
RequiredDescription
Chart data.
Type
Dict<any>[]BarChart
BarChart is a component for drawing bar charts to compare multiple sets of data.
Props
BarChartProps
dataKey
RequiredDescription
The key of a group of data which should be unique in an chart.
Type
stringseries
RequiredDescription
An array of objects with name and color keys. Determines which data should be consumed from the data array.
Type
BarProps[]barProps
Description
Props for the bars.
Type
Partial<BarProps>cell
Description
A function that returns a component that renders the bar cells.
Type
string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | FC<...>chartProps
Description
Props passed down to recharts BarChart component.
Type
BarChartPropscolorScheme
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"containerProps
Description
Props passed down to recharts ResponsiveContainer component.
Type
ResponsiveContainerPropsgridAxis
Description
Specifies which lines should be displayed in the grid.
Type
ChartAxisTypeDefault
'x'gridProps
Description
Props passed down to recharts 'CartesianGrid' component.
Type
GridPropslabelFormatter
Description
A function to format labels on inside the tooltip.
Type
(label: string) => stringlayoutType
Description
Chart orientation.
Type
ChartLayoutTypeDefault
'horizontal'legendProps
Description
Props passed down to recharts 'Legend' component.
Type
LegendPropsreferenceLineProps
Description
Reference lines that should be displayed on the chart.
Type
ReferenceLineProps[]size
Description
The size of the BarChart.
Type
"sm" | "md" | "lg" | "full"Default
"full"syncId
Description
If any two categorical charts have the same syncId, these two charts can sync the position tooltip, and the startIndex, endIndex of Brush.
Type
string | numbertickLine
Description
The option is the configuration of tick lines.
Type
ChartAxisTypeDefault
'y'tooltipAnimationDuration
Description
Specifies the duration of animation, the unit of this option is ms.
Type
numberDefault
0tooltipProps
Description
Props passed down to recharts 'Tooltip' component.
Type
TooltipPropstype
Description
Controls how chart bars are positioned relative to each other. Controls how chart areas are positioned relative to each other
Type
"default" | "percent" | "stacked"Default
`default`unit
Description
Unit displayed next to each tick in y-axis.
Type
stringvalueFormatter
Description
A function to format values on inside the tooltip.
Type
(value: any) => stringvariant
Description
The variant of the BarChart.
Type
stringwithLegend
Description
If true, legend is visible.
Type
booleanDefault
falsewithTooltip
Description
If true, tooltip is visible.
Type
booleanDefault
truewithXAxis
Description
If true, X axis is visible.
Type
booleanDefault
truewithYAxis
Description
If true, Y axis is visible.
Type
booleanDefault
truexAxisLabel
Description
A label to display below the X axis.
Type
stringxAxisLabelProps
Description
Props passed down to recharts 'XAxisLabel' component.
Type
LabelPropsxAxisProps
Description
Props passed down to recharts 'XAxis' component.
Type
XAxisPropsxAxisTickFormatter
Description
A function to format X axis tick.
Type
(value: any) => stringyAxisLabel
Description
A label to display below the Y axis.
Type
stringyAxisLabelProps
Description
Props passed down to recharts 'YAxisLabel' component.
Type
LabelPropsyAxisProps
Description
Props passed down to recharts 'YAxis' component.
Type
YAxisPropsyAxisTickFormatter
Description
A function to format Y axis tick.
Type
(value: any) => stringBarProps
activeBar
Type
Merge<SVGProps<SVGPathElement>, CSSUIProps>background
Type
Merge<SVGProps<SVGPathElement>, CSSUIProps>color
Type
UIValue<"border" | ({} & string) | Color | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">dimBar
Type
Partial<BarProps>Edit this page on GitHub