shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartScatterOutline } from "@/components/charts/chart-scatter-outline";<ChartScatterOutline />API Reference
ScatterChart
datareadonly Row[]
The rows to plot. Each row holds the x value under xDataKey and one number per Scatter 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"
animationDuration?number
Duration of the entrance reveal in milliseconds. 0 skips the animation. enterTransition.duration overrides it.
- Default
1100
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 }
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.
style?CSSProperties
Inline styles for the chart container.
onPhaseChange?(phase: ScatterChartPhase) => void
Called with "revealing" when the entrance starts and "ready" when the chart becomes interactive.
- Type
(phase: ScatterChartPhase) => void
animationEasing?string
CSS easing for the per-point entrance, for example "cubic-bezier(0.85, 0, 0.15, 1)". When unset, enterTransition.ease or the default reveal easing is used.
enterTransition?{ readonly duration?: number; readonly ease?: unknown }
Entrance timing: duration (in seconds) sets the length of the reveal and ease (a four-number cubic bezier) the easing.
- Type
{ readonly duration?: number; readonly ease?: unknown }
revealSignature?string
Changing this string replays the entrance animation.
childrenReactNode
The layers to draw: Grid, one or more Scatter, XAxis, YAxis, ChartTooltip and the other chart children.
ariaLabel?string
Accessible name of the chart.
- Default
"Scatter chart"
ariaDescription?string
Longer accessible description of the chart, exposed as aria-description.
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.
Scatter
dataKeystring
Key of the data field that holds this series' y values.
label?string
Name of the series in the default tooltip row. Defaults to \dataKey\.
yAxisId?string | number
Id of the y scale this series is plotted against.
- Type
string | number- Default
"left"
animate?boolean
Whether the dots animate in on entrance.
- Default
true
fill?string
Fill color of the dots. Defaults to stroke, then to a color from the chart palette.
stroke?string
Color of the ring around each dot. Defaults to the resolved fill.
strokeWidth?number
Width of the ring around each dot in px.
- Default
2
ringGap?number
Gap between the dot and its ring in px.
- Default
2
radius?number
Radius of the dot in px.
- Default
5
yGradient?boolean | Readonly<{ from?: string; to?: string }>
Fills the dots with a color that ends at to (or a default accent color when true). Overrides fill; the ring follows unless stroke is set.
- Type
boolean | Readonly<{ from?: string; to?: string }>
fadeOnHover?boolean
Dim the dots that are not hovered while the chart is hovered.
- Default
true
inactiveOpacity?number
Opacity of the dimmed dots when fadeOnHover is on.
- Default
0.5
inactiveBlur?number
Blur in px of the dimmed dots when fadeOnHover is on.
- Default
2
enterBlur?number
Blur in px the dots start from while they fade in on entrance.
- Default
2
showActiveHighlight?boolean
Draw the hovered dot 1.35 times larger.
- Default
true
outlineWidth?number
Width in px of an optional outline drawn outside the ring. 0 draws none.
- Default
0
outlineColor?string
Color of the outline. Defaults to the ring color.
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
YAxis
yAxisId?string | number
Id of the y scale this axis labels. Must match the yAxisId of the series that use it.
- Type
string | number- Default
"left"
orientation?"left" | "right"
Side of the plot the axis sits on. The primary axis is on the left; additional axes default to the right.
- Type
"left" | "right"- Default
"left"
numTicks?number
Target number of tick labels. The primary axis also sets the number of horizontal grid lines.
- Default
5
formatLargeNumbers?boolean
Abbreviate values of 1000 and above as thousands, with one decimal where needed, for example 2k or 1.5k.
- Default
true
formatValue?(value: number) => string
Formats a tick value into its label. Overrides formatLargeNumbers.
- Type
(value: number) => 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.
- 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.