shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartBarSources } from "@/components/charts/chart-bar-sources";<ChartBarSources />API Reference
BarChart
dataRow[]
The rows to plot. Each row holds a category label under xDataKey and one number per series under that series' dataKey.
xDataKey?string
Key of the category label in each row.
- Default
"name"
animationDuration?number
Duration of the entrance in milliseconds. Bars are staggered across 40% of this duration.
- Default
1100
animationEasing?string
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. The entrance always uses the default reveal easing.
enterTransition?Transition
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts.
revealSignature?string
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts.
margin?Partial<ChartMargin>
Space around the plot area in pixels, for axis labels and the tooltip. Missing sides use the default.
- Type
Partial<ChartMargin>- Default
{ top: 40, right: 40, bottom: 40, left: 40 }
aspectRatio?string
CSS aspect ratio of the chart, as "width / height".
- Default
"2 / 1"
className?string
Extra CSS class name for the chart container.
style?CSSProperties
Inline styles for the chart container. Set aspectRatio: "unset" to let the chart fill the height of its parent.
barGap?number
Gap between bar groups as a fraction of the band width (0 to 1).
- Default
0.2
barWidth?number
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. Bars always fill their band; use barGap to change their width.
orientation?BarOrientation
Direction the bars grow. "horizontal" puts the categories on the y axis.
- Default
"vertical"
stacked?boolean
Stack the series on top of each other instead of grouping them side by side.
- Default
false
stackGap?number
Gap between stacked segments in px.
- Default
0
squareSnap?{ squareGap: number; groupGap?: number; fit?: boolean }
Snap the tooltip dots of grouped vertical bars onto the centre of the top square of a squareGap column (fit redistributes the gap); groupGap sets the ring dot's slot gap.
- Type
{ squareGap: number; groupGap?: number; fit?: boolean }
onPhaseChange?(phase: ChartPhase) => void
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. The bar chart does not report phases.
- Type
(phase: ChartPhase) => void
children?ReactNode
The layers to draw: Bar, BarSquares, Grid, BarXAxis, BarYAxis, ChartTooltip and the other chart children. Optional for a status="loading" skeleton.
ariaLabel?string
Accessible name of the chart.
- Default
"Bar chart"
ariaDescription?string
Longer accessible description of the chart, exposed as aria-description.
status?ChartStatus
"loading" replaces the bars with a shimmering skeleton and ignores the pointer; switching to "ready" grows the real bars.
- Default
"ready"
Bar
dataKeystring
Key of the data field that holds this series' values.
label?string
Name of the series in the default tooltip row. Defaults to dataKey.
yAxisId?string | number
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. A bar chart has a single value scale.
- Type
string | number
fill?string
Fill color of the bars. Can be a color or a url(#id) reference to a gradient or pattern child.
- Default
"var(--chart-line-primary)"
stroke?string
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts.
lineCap?BarLineCap
Bar end style: "round" rounds the outer corners, "butt" leaves them square. A number is treated like "round".
- Default
"round"
animate?boolean
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. Bars always animate in with the chart's animationDuration.
animationType?BarAnimationType
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. Bars always grow from the baseline.
fadedOpacity?number
Opacity of the bars that are not hovered while another bar is hovered. Read from the first Bar.
- Default
0.3
staggerDelay?number
Delay in seconds between the entrances of consecutive bars of this series. Defaults to 40% of animationDuration spread across the categories.
stackGap?number
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. Set stackGap on BarChart instead.
groupGap?number
Gap in px between the bars of a group. Read from the first Bar.
- Default
4
perspective?boolean
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. Depth surfaces trim the front face automatically.
minBarHeight?number
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. Set minBarHeight on BarDepthProvider for depth surfaces.
BarYAxis
showAllLabels?boolean
Horizontal charts: show every category label instead of thinning to maxLabels.
- Default
true
maxLabels?number
Horizontal charts: maximum number of category labels when showAllLabels is off.
- Default
20
numTicks?number
Vertical charts: target number of value ticks. Grid settings take precedence.
- Default
5
formatLargeNumbers?boolean
Vertical charts: abbreviate values of 1000 and above as thousands, for example 2k.
- Default
true
formatValue?(value: number) => string
Vertical charts: formats a value tick into its label. Overrides formatLargeNumbers.
- Type
(value: number) => string
orientation?"left" | "right"
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. The value axis is always on the left.
- Type
"left" | "right"
ChartTooltip
showDatePill?boolean
Show the date pill that rides along the bottom of the plot.
- Default
true
showCrosshair?boolean
Show the vertical crosshair line.
- Default
true
showDots?boolean
Show a dot on every series at the hovered position.
- Default
true
dotVariant?"dot" | "ring"
Dot style: a filled "dot" or a transparent "ring" square. Read by BarChart only.
- Type
"dot" | "ring"- Default
"dot"
dotSize?number
Dot radius in px.
- Default
5
dotRadiusFraction?number
Corner radius of the "ring" variant as a fraction of its side (0 is square, 0.5 is a circle). Read by BarChart only.
- Default
0.25
dotScale?number
Multiplier applied to the dot or ring size. Read by BarChart and LiveLineChart.
- Default
1
dotStrokeWidth?number
Stroke width of the dots in px.
- Default
2
indicatorColor?string | ((point: Record<string, unknown>) => string)
Color of the crosshair. Only a string is applied; the function form that bklit-ui accepts is ignored and the default is used.
- Type
string | ((point: Record<string, unknown>) => string)- Default
"var(--chart-crosshair)"
content?(props: { point: Record<string, unknown>; index: number }) => ReactNode
Replaces the default tooltip panel body. Receives the hovered data row and its index.
- Type
(props: { point: Record<string, unknown>; index: number }) => ReactNode
rows?(point: Record<string, unknown>) => { readonly color: string; readonly label: string; readonly value: string | number }[]
Replaces the default rows (one per series) with your own list of { color, label, value }.
- Type
(point: Record<string, unknown>) => { readonly color: string; readonly label: string; readonly value: string | number }[]
dotColor?string | ((point: Record<string, unknown>, line: ChartLineConfig) => string)
Fill of the tooltip dots. A function receives the hovered row and the series config, and is called again each time the hovered row changes. Defaults to each series' color; a ProfitLossLine's dot takes the color of the hovered value's sign.
- Type
string | ((point: Record<string, unknown>, line: ChartLineConfig) => string)
children?ReactNode
Extra content rendered below the rows in the default panel, for example marker details. Without it, a chart with ChartMarkers lists the markers on the hovered date there.
className?string
Extra class name for the tooltip panel.
springConfig?SpringConfig
Spring for the floating panel when matchCrosshair is on. Defaults to the chart's tooltip spring.
matchCrosshair?boolean
Make the floating panel follow the pointer with the same spring as the crosshair instead of damping.
- Default
false
damping?number
Spring damping for the floating panel when matchCrosshair is off. 0 moves the panel instantly.
- Default
20
indicatorDasharray?string
Dash pattern of the crosshair. Omit for a solid line.
indicatorFadeEdges?IndicatorFadeEdges
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. The crosshair in this package is solid.
indicatorFadeLength?number
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts.
boxSpringConfig?SpringConfig
Spring for the floating panel. Takes priority over matchCrosshair and damping.
panelStyle?CSSProperties
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. Style the panel with className or the --chart-tooltip-* CSS variables instead.
backgroundColor?string
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. Set --chart-tooltip-background instead.
indicatorWidth?IndicatorWidth
Thickness of the crosshair: a width in px, or "line" (1px), "thin" (2px), "medium" (4px) or "thick" (8px).
- Default
"line"
columnWidth?number
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts.