shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartTooltipIndicator } from "@/components/charts/chart-tooltip-indicator";<ChartTooltipIndicator />API Reference
LineChart
dataChartDatum[]
The rows to plot. Each row is an object holding the x value under xDataKey and one number per series under that series' dataKey.
xDataKey?string
Key of the x value in each row. The value must be a Date (or something new Date() accepts, such as a timestamp).
- Default
"date"
status?ChartStatus
"loading" shows the loading state (skeleton line, grid shimmer, optional label) and ignores the pointer; switching to "ready" reveals the real data on the same chart instance.
- Default
"ready"
animationDuration?number
Duration of the entrance reveal in milliseconds. 0 skips the animation.
- Default
1100
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 ("width / height" or a number), applied to the container width.
- Default
"2 / 1"
className?string
Extra CSS class name for the chart container.
onPhaseChange?(phase: ChartPhase) => void
Called with "loading" or "ready" when status changes (and once on mount).
- Type
(phase: ChartPhase) => void
childrenReactNode
The layers to draw: Grid, Line, XAxis, YAxis, ChartTooltip and the other chart children.
loadingLabel?string
Text shown centered over the chart, with a shimmer, while status is "loading". Nothing is shown when it is unset or empty.
style?CSSProperties
Inline styles for the chart container, for example a fixed height for a brush strip.
animationEasing?string
CSS easing of the entrance reveal (a cubic-bezier(…), linear, ease-in-out…). enterTransition takes priority.
- Default
"cubic-bezier(0.85, 0, 0.15, 1)"
yDomainTween?boolean
Animate the y domain when the data or status changes instead of jumping to the new scale.
- Default
true
yDomains?Readonly<Record<string, YDomainOverride>>
Per-axis y-domain overrides, keyed by yAxisId ("left" for the default axis): a fixed [min, max], or a function of the auto domain (before it is niced) that returns the one to use, e.g. { left: ([, max]) => [0, max * 3] }. Hoist the object out of render.
- Type
Readonly<Record<string, YDomainOverride>>
yDomainTweenDuration?number
Duration in milliseconds of the y-domain tween (a data update, the loading to ready handoff, a brushed window).
- Default
500
xDomain?[Date, Date]
Visible x range as [start, end], used for brush zoom. The chart plots only this range of data.
xDomainSlotCount?number
Length of the full dataset while xDomain zooms into part of it. It keeps the x spacing consistent with the unzoomed chart.
tweenYDomainOnXDomainChange?boolean
Accepted for bklit-ui compatibility. It has no effect.
enterTransition?EnterTransition
The entrance reveal as a motion transition: its duration (seconds) and ease (a cubic-bezier array or a CSS easing) override animationDuration and animationEasing. A reveal is always a tween.
yScaleDomainMax?number
Fixed top of the y domain on a single-axis chart: the domain becomes [0, yScaleDomainMax × 1.1] (niced) instead of following the data, leaving headroom above the series or keeping several charts on one scale.
revealSignature?string
Changing this string replays the entrance animation. Do not change it when only the data changes.
ariaLabel?string
Accessible name of the chart.
- Default
"Line chart"
ariaDescription?string
Longer accessible description of the chart, exposed as aria-description.
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.
Line
dataKeystring
Key of the data field that holds this line's y values.
label?string
Name of the series in the default tooltip row and the chart context's \lines\ (what a legend built from them reads). Defaults to \dataKey\.
stroke?string
Stroke color of the line.
- Default
"var(--chart-line-primary)"
strokeWidth?number
Stroke width of the line in px.
- Default
2.5
curve?CurveFactory
d3-shape curve factory used to interpolate between points.
- Default
curveNatural
yAxisId?string | number
Id of the y scale this line is plotted against. Use it with a matching YAxis to give a series its own scale.
- Type
string | number- Default
"left"
fadeEdges?FadeEdges
Fade the line toward transparent at the chart edges. true fades both ends, "left" or "right" fades one side, false turns the fade off, and { left, right } sets each side's fade zone as a percentage of the plot width (0-50).
- Default
true
strokeGradient?StrokeGradient
A colour ramp across the plot, left to right: plain colours are spaced evenly, { offset, color } stops (offset 0-1) place them. It composes with fadeEdges and replaces stroke for the line's paint (stroke still colours the markers and the tooltip dot).
glow?boolean | Readonly<LineGlow>
A soft outer glow: a blurred copy of the stroke behind the line. true uses the defaults; { blur, opacity, strokeWidth } tunes it.
- Type
boolean | Readonly<LineGlow>- Default
false
showHighlight?boolean
Draw a highlighted segment of the line around the hovered point.
- Default
true
highlight?Readonly<LineHighlight>
The hover highlight's styling: colour or ramp, width, soft ends (fadeLength), glow, span and how far the rest of the line dims (dimOpacity). See LineHighlight.
- Type
Readonly<LineHighlight>
showMarkers?boolean
Draw a circle marker at every data point.
- Default
false
markers?Readonly<SeriesPointMarkerStyle>
Styling of the point markers drawn by showMarkers. See SeriesPointMarkerStyle.
- Type
Readonly<SeriesPointMarkerStyle>
dashFromIndex?number
Data index from which the line is drawn dashed (inclusive). Useful for marking an incomplete or projected period.
dashArray?string
Dash pattern of the dashed tail when dashFromIndex is set.
- Default
"6,4"
loadingStroke?string
Stroke color of the loading pulse overlay.
- Default
"var(--chart-foreground)"
loadingStrokeOpacity?number
Stroke opacity of the loading pulse overlay.
- Default
0.5
animate?boolean
Whether the point markers animate in. The line itself always enters with the chart's animationDuration.
- Default
true
loading?boolean
Show the loading pulse overlay on this line. When unset, the pulse follows the chart's status. Set false to disable it even while the chart is loading.
loadingPulseMode?LineLoadingPulseMode
Phase of the loading pulse: "loop" repeats, "exit" plays the loading to ready transition, "enter" plays ready to loading.
- Default
"loop"
loadingStyle?LoadingStyle
Loading animation: a travelling "pulse" or a diagonal "sweep" shimmer across the skeleton line.
- Default
"pulse"
onLoadingPulseCycleComplete?() => void
Called each time a "loop" pulse cycle completes.
- Type
() => void
renderer?ChartMarkRenderer
Where the line draws: "svg", a path, or canvasRenderer, a bitmap the chart's canvas lines share, for tens of thousands of points (the grid, axes, hover highlight, markers, glow, crosshair and tooltip stay SVG). On a canvas the line dims with the others on hover (a legend can't dim it alone) and doesn't take a fadeEdges mask.
- Default
"svg"
XAxis
numTicks?number | ResponsiveChartLabelCount
Target number of tick labels along the x axis, or one per chart width: { base, sm, md, lg, xl } takes the count of the widest breakpoint the chart reaches (640, 768, 1024 and 1280 px).
- Type
number | ResponsiveChartLabelCount- Default
5
labels?readonly string[]
The tick text of each data row, in row order: it replaces the date formatting (pair it with ChartTooltip dateLabels).
tickerHalfWidth?number
Half-width in px of the zone around the date pill inside which tick labels are hidden. Line, area and composed charts widen it to the pill's half-width plus the widest tick label's, so no label sits half under the pill.
- Default
50
tickMode?"domain" | "data"
Where ticks fall: "data" places them on evenly spaced data rows, "domain" places them at evenly spaced time values across the x domain.
- Type
"domain" | "data"- Default
"data"
formatValue?(value: Readonly<Date>) => string
Formats a tick date into its label. Defaults to a short month and day such as "Jan 5".
- Type
(value: Readonly<Date>) => string
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.
TooltipIndicator
x?number
Accepted so bklit-ui code compiles. Has no effect.
height?number
Accepted so bklit-ui code compiles. Has no effect.
visible?boolean
Show the crosshair. Same as showCrosshair on ChartTooltip.
- Default
true
width?IndicatorWidth
Thickness of the crosshair: a width in px, or "line" (1px), "thin" (2px), "medium" (4px) or "thick" (8px).
- Default
"line"
span?number
Accepted so bklit-ui code compiles. Has no effect.
columnWidth?number
Accepted so bklit-ui code compiles. Has no effect.
colorEdge?string
Color of the crosshair. Same as indicatorColor.
- Default
"var(--chart-crosshair)"
colorMid?string
Accepted so bklit-ui code compiles. Has no effect.
fadeEdges?IndicatorFadeEdges | boolean
Accepted so bklit-ui code compiles. Has no effect. The crosshair is solid.
- Type
IndicatorFadeEdges | boolean
fadeLength?number
Accepted so bklit-ui code compiles. Has no effect.
animate?boolean
Accepted so bklit-ui code compiles. Has no effect.
gradientId?string
Accepted so bklit-ui code compiles. Has no effect.
springConfig?{ readonly stiffness: number; readonly damping: number }
Accepted so bklit-ui code compiles. Has no effect.
- Type
{ readonly stiffness: number; readonly damping: number }
strokeDasharray?string
Dash pattern of the crosshair. Omit for a solid line. Same as indicatorDasharray.
TooltipDot
x?number
Accepted so bklit-ui code compiles. Has no effect.
y?number
Accepted so bklit-ui code compiles. Has no effect.
visible?boolean
Show the dots. Same as showDots on ChartTooltip.
- Default
true
color?string
Fill color of the dots. Defaults to each series' color.
size?number
Dot radius in px. Same as dotSize.
- Default
5
strokeColor?string
Accepted so bklit-ui code compiles. Has no effect.
strokeWidth?number
Stroke width of the dots in px. Same as dotStrokeWidth.
- Default
2
variant?"dot" | "ring"
"dot" or "ring". Same as dotVariant; read by BarChart only.
- Type
"dot" | "ring"- Default
"dot"
cornerRadiusFraction?number
Accepted so bklit-ui code compiles. Has no effect.
springConfig?{ readonly stiffness: number; readonly damping: number }
Accepted so bklit-ui code compiles. Has no effect.
- Type
{ readonly stiffness: number; readonly damping: number }
animate?boolean
Accepted so bklit-ui code compiles. Has no effect.
