shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartBarSquaresLegend } from "@/components/charts/chart-bar-squares-legend";<ChartBarSquaresLegend />API Reference
ChartLegendHoverProvider
hoveredIndexnumber | null
- Type
number | null
onHoverChange(index: number | null) => void
- Type
(index: number | null) => void
childrenReactNodeBarChart
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
Fixed bar thickness in px, centred in its slot. When unset, the bars fill their band (barGap sets the gap).
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"
loadingFill?string
Fill color of the loading skeleton's bars. Defaults to the first Bar's stroke, else its fill.
syncId?string
Charts with the same syncId move together: hovering or keyboard-focusing one shows the crosshair, dots and date pill at the same date on the others (the same category, for bar charts), and a ChartBrush or ChartZoom in a time chart zooms the time charts of the group to its window.
syncY?boolean
With syncId: every chart of the group draws on one y scale (the union of their data), so small multiples compare at a glance. Read by LineChart and AreaChart.
- Default
false
activeIndex?number | null
Index into data of the row to focus (crosshair, dots and tooltip), for example the row a table has under the pointer. null clears it.
- Type
number | null
onActiveIndexChange?(index: number | null) => void
Called with the index into data of the row the pointer or keyboard focuses, and with null when the focus leaves.
- Type
(index: number | null) => void
Grid
horizontal?boolean
Show horizontal grid lines.
- Default
true
vertical?boolean
Show vertical grid lines.
- Default
false
numTicksRows?number
Number of horizontal grid lines. Ignored when rowTickValues is set.
- Default
5
numTicksColumns?number
Number of vertical grid lines.
- Default
10
rowTickValues?number[]
Explicit y values for the horizontal grid lines. Overrides numTicksRows.
stroke?string
Color of the grid lines.
- Default
"var(--chart-grid)"
loadingStroke?string
Grid color while the chart is loading. Falls back to stroke.
strokeOpacity?number
Opacity of the grid lines.
- Default
1
strokeWidth?number
Width of the grid lines in px.
- Default
1
strokeDasharray?string
Dash pattern of the grid lines.
- Default
"4,4"
highlightRowValues?number[]
Y values of horizontal lines drawn with the highlight styling, for example a zero baseline.
highlightRowStroke?string
Color of the highlighted rows.
- Default
"var(--chart-foreground-muted)"
highlightRowStrokeOpacity?number
Opacity of the highlighted rows.
- Default
1
highlightRowStrokeWidth?number
Width of the highlighted rows in px.
- Default
1
highlightRowStrokeDasharray?string
Dash pattern of the highlighted rows.
- Default
"0"
fadeHorizontal?boolean
Fade the horizontal lines toward transparent at the left and right edges.
- Default
true
fadeVertical?boolean
Fade the vertical lines toward transparent at the top and bottom edges.
- Default
false
hideHorizontalEdgeLines?boolean
Drop the first and last horizontal line (kept when two or fewer remain).
- Default
false
hideVerticalEdgeLines?boolean
Drop the first and last vertical line (kept when two or fewer remain).
- Default
false
yAxisId?string | number
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. The grid follows the primary (left) y scale.
- Type
string | number
shimmer?boolean
While the chart is loading, sweep a bright band across the grid.
- Default
false
shimmerStroke?string
Color of the shimmer band.
- Default
"color-mix(in oklch, var(--bkm-foreground) 68%, transparent)"
shimmerLength?number
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts.
shimmerSpeed?number
Speed multiplier of the shimmer sweep. 2 is twice as fast.
- Default
1
shimmerSync?boolean
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts.
BarColumnTrack
fill?string
Fill color of the track behind the bars.
- Default
"var(--chart-grid)"
opacity?number
Opacity of the track.
- Default
0.3
squareGap?number
Gap between the squares in px, which sets where the track starts above them. Match the BarSquares value.
- Default
3
squareRadius?number
Corner radius of the track as a fraction of the column width. Match the BarSquares value.
- Default
0.25
groupGap?number
Gap in px between the track columns of a group.
- Default
4
squareFit?boolean
Whether the squares are redistributed to fill the bar height exactly, which sets where the track starts above them. Match the BarSquares value.
- Default
false
staggerDelay?number
Delay in seconds between consecutive column entrances. Defaults to 40% of animationDuration spread across the categories.
BarSquares
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.
- Type
string | number
fill?string
Fill color of the squares, 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.
colorKey?string
Key of a data field holding a color per column: a row with a string there solid-fills its column with it (no gradient), the others use fill.
squareGap?number
Gap between stacked squares in px.
- Default
3
squareRadius?number
Corner radius of each square as a fraction of its size (0 is flat, 0.5 is a circle).
- Default
0.25
squareFit?boolean
Redistribute the gap so the squares fill the bar height exactly.
- Default
false
useGradient?boolean
Paint the column with a gradient built from gradientStops (needs at least two stops).
- Default
false
gradientStops?readonly GradientStop[]
Color stops of the column gradient used when useGradient is on. Each offset is a percentage of the column height, 0 (bottom) to 100 (top), not a 0 to 1 fraction.
patternPreset?string
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts.
animate?boolean
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts.
fadedOpacity?number
Opacity of the squares that are not hovered while another bar is hovered.
- Default
0.3
staggerDelay?number
Delay in seconds between consecutive column entrances. Defaults to 40% of animationDuration spread across the categories.
groupGap?number
Gap in px between the columns of a group.
- Default
4
BarXAxis
tickerHalfWidth?number
Half-width in px of the zone around the date pill inside which tick labels are hidden.
- Default
50
showAllLabels?boolean
Show every category label, even where they overlap, instead of thinning them to maxLabels and to the plot width.
- Default
false
maxLabels?BarLabelCount
Maximum number of category labels when showAllLabels is off. Fewer are shown, evenly spaced, when that many would not fit the plot width. Pass { base, sm, md, lg, xl } to vary it with the chart's width (640, 768, 1024 and 1280 px and up).
- Default
12
ChartTooltip
showDatePill?boolean
Show the date pill that rides along the bottom of the plot.
- Default
true
showCrosshair?boolean
Show the vertical crosshair line. Bar charts leave it off unless this is true (the dots and the category pill mark the bar).
- 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; pinned?: boolean; dismiss?: () => void }) => ReactNode
Replaces the default tooltip panel body. Receives the hovered data row and its index; with pinnable, also whether the panel is pinned and a dismiss that unpins it (for a close button in a pinned panel's detail).
- Type
(props: { point: Record<string, unknown>; index: number; pinned?: boolean; dismiss?: () => void }) => ReactNode
pinnable?boolean
A click (or Enter, or Space) on the chart pins the tooltip where it is: the panel takes the pointer, so its content can grow into detail and hold controls, until another click, Escape or dismiss lets it go.
- Default
false
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, on bklit's 0 to 100 scale: lower is bouncier, higher slower, 0 moves the panel instantly. The default, 20, is the snappy hover spring (stiffness 3600, damping 120); every other value is bklit's spring for it played six times faster.
- Default
20
indicatorDasharray?string
Dash pattern of the crosshair. Omit for a solid line.
indicatorFadeEdges?IndicatorFadeEdges
Vertical fade of the crosshair: both ends, the top, the bottom, or none (solid).
- Default
"both"
indicatorFadeLength?number
Size of the crosshair's fade, as a percentage of its height (2 to 40).
- Default
10
indicatorEndColor?string
Bottom colour of the crosshair: it ramps from indicatorColor at the top to this at the bottom (composes with the fade).
indicatorEnd?"plot" | "point"
How far down the crosshair reaches: the whole plot, or down to the hovered point of the first series.
- Type
"plot" | "point"- Default
"plot"
dotHaloBlur?number
Blur in px on the dots' halo, for a soft glow.
- Default
0
topOffset?number
Extra gap in px between the top of the plot and the tooltip panel.
- Default
0
dateLabels?readonly string[]
The date pill's text for each data row, in row order (pair it with XAxis labels).
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.
ChartLegend
itemsLegendItem[]
The items to list.
hoveredIndex?number | null
Hovered item index (null for none). Pair it with onHover to share hover with a chart.
- Type
number | null- Default
null
onHover?(index: number | null) => void
Called with the item index when the pointer enters a row, and null when it leaves.
- Type
(index: number | null) => void
showProgress?boolean
Show a progress bar under each item that has a maxValue.
- Default
false
showMarker?boolean
Show the colored dot before each label.
- Default
true
showValue?boolean
Show each item's value.
- Default
true
showPercentage?boolean
Show each item's percentage of maxValue, under its progress bar: it takes effect only with showProgress and an item maxValue, as in bklit-ui (chart-legend.tsx:115, where the plain row has no percentage). For a percentage without a bar, compose Legend with LegendValue showPercentage.
- Default
the value of `showProgress`
formatValue?(value: number) => string
Formats each value.
- Type
(value: number) => string- Default
en-US number format, for example "1,234"
title?string
Heading shown above the items.
className?string
Class names added to the legend container.
titleClassName?string
Class names added to the title, on top of the default title style.
itemClassName?string
Class names added to each row.
labelClassName?string
Class names that replace the default label text style.
valueClassName?string
Class names that replace the default value text style.
renderItem?(props: Readonly<{ readonly item: LegendItem; readonly index: number; readonly isHovered: boolean; readonly isFaded: boolean; readonly percentage: number }>) => ReactNode
Renders a row yourself. Receives the item, its index, hover flags and its percentage of maxValue. When set, the show* options are ignored.
- Type
(props: Readonly<{ readonly item: LegendItem; readonly index: number; readonly isHovered: boolean; readonly isFaded: boolean; readonly percentage: number }>) => ReactNode
