shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartCandlestickMinimal } from "@/components/charts/chart-candlestick-minimal";<ChartCandlestickMinimal />API Reference
CandlestickChart
dataOHLCDataPoint[]
The candles to plot, one row per period.
xDataKey?string
Key of the time value in each row. The value must be a Date or something new Date() accepts.
- Default
"date"
margin?Partial<ChartMargin>
Space around the plot area in pixels. Missing sides use the default.
- Type
Partial<ChartMargin>- Default
{ top: 40, right: 40, bottom: 40, left: 40 }
animationDuration?number
Duration of the entrance in milliseconds.
- Default
1100
enterTransition?EnterTransition
Customizes the entrance: a spring, or a cubic-bezier tween with a duration in seconds. See EnterTransition.
revealSignature?string
Changing this string replays the entrance animation.
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. aspectRatio: "unset" or an explicit height makes the chart fill the container height.
candleGap?number
Gap between candle slots as a fraction of the slot width (0-1). Ignored when candleWidth is set. A gap below the default cannot widen candles past 80% of their spacing.
- Default
0.2
candleWidth?number
Fixed candle body width in px. When unset, candles size to the spacing between them.
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 candle spacing consistent with the unzoomed chart.
childrenReactNode
The layers to draw: Candlestick, Grid, XAxis, YAxis, ChartTooltip and the other chart children.
ariaLabel?string
Accessible name of the chart.
- Default
"Candlestick chart"
ariaDescription?string
Longer accessible description of the chart, exposed as aria-description.
Candlestick
animate?boolean
Animate the candles in on entrance.
- Default
true
positiveFill?string
Fill color of candles that closed at or above their open.
- Default
"var(--chart-positive)"
negativeFill?string
Fill color of candles that closed below their open.
- Default
"var(--chart-negative)"
bodyPatternPositive?string
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts.
bodyPatternNegative?string
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts.
insideStrokeWidth?number
Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts.
fadedOpacity?number
Opacity of the candles that are not hovered while another candle is hovered.
- Default
0.3
showHoverFade?boolean
Dim the candles that are not hovered.
- Default
true
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.
XAxis
numTicks?number
Target number of tick labels along the x axis.
- Default
5
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