Composed Chart

The rows to plot. Each row holds the x value under xDataKey and one number per series under that series' dataKey.

Key of the x value in each row. The value must be a Date (or something new Date() accepts).

Default

"date"

Duration of the entrance in milliseconds. enterTransition.duration overrides it.

Default

1100

Space around the plot area in pixels. Missing sides use the default.

Type

Partial<ChartMargin>

Default

{ top: 40, right: 40, bottom: 40, left: 40 }

CSS aspect ratio of the chart, as "width / height".

Default

"2 / 1"

Extra CSS class name for the chart container.

Called with "ready" when the chart mounts.

Type

(phase: ChartPhase) => void

Target SeriesBar width in px. When unset, bars size to the available space.

Maximum SeriesBar width in px.

Gap between the grouped SeriesBar columns in px.

Default

4

Stack the SeriesBar segments in child order instead of grouping them.

Default

false

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] }. Define the object outside the component so it keeps its identity.

Type

Readonly<Record<string, YDomainOverride>>

With a SeriesBar or a Candlestick, inset the x axis by half a slot on each side so the first and last bars clear the plot edges; lines and areas share the inset scale. false draws edge to edge.

Default

true

Vertical gap between stacked segments in px.

Default

0

Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. The entrance always uses the default tween ease.

Overrides the entrance duration (duration is in seconds, as in bklit-ui). Springs are treated as the default tween.

Changing this string replays the entrance animation.

The layers to draw: SeriesBar, Line, Area, Scatter, Candlestick, ProfitLossLine, Grid, XAxis, YAxis, ChartTooltip and the other chart children.

Accessible name of the chart.

Default

"Composed chart"

Longer accessible description of the chart, exposed as aria-description.

Show horizontal grid lines.

Default

true

Show vertical grid lines.

Default

false

Number of horizontal grid lines. Ignored when rowTickValues is set.

Default

5

Number of vertical grid lines.

Default

10

Explicit y values for the horizontal grid lines. Overrides numTicksRows.

Color of the grid lines.

Default

"var(--chart-grid)"

Grid color while the chart is loading. Falls back to stroke.

Opacity of the grid lines.

Default

1

Width of the grid lines in px.

Default

1

Dash pattern of the grid lines.

Default

"4,4"

Y values of horizontal lines drawn with the highlight styling, for example a zero baseline.

Color of the highlighted rows.

Default

"var(--chart-foreground-muted)"

Opacity of the highlighted rows.

Default

1

Width of the highlighted rows in px.

Default

1

Dash pattern of the highlighted rows.

Default

"0"

Fade the horizontal lines toward transparent at the left and right edges.

Default

true

Fade the vertical lines toward transparent at the top and bottom edges.

Default

false

Drop the first and last horizontal line (kept when two or fewer remain).

Default

false

Drop the first and last vertical line (kept when two or fewer remain).

Default

false

Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. The grid follows the primary (left) y scale.

Type

string | number

While the chart is loading, sweep a bright band across the grid.

Default

false

Color of the shimmer band.

Default

"color-mix(in oklch, var(--bkm-foreground) 68%, transparent)"

Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts.

Speed multiplier of the shimmer sweep. 2 is twice as fast.

Default

1

Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts.

Key of the data field that holds this area's y values.

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\.

Color of the area's top line. Falls back to fill, then to the default line color.

Default

"var(--chart-line-primary)"

Stroke width of the top line in px.

Default

2

Fill color of the area. Defaults to the resolved stroke.

Opacity of the fill at the top of the area, before the gradient fades it toward gradientToOpacity.

Default

0.4

d3-shape curve factory used to interpolate between points.

Default

curveMonotoneX

Id of the y scale this area is plotted against.

Type

string | number

Default

"left"

Draw the stroke line along the top of the area.

Default

true

Fill opacity at the bottom of the vertical gradient.

Default

0

Vertical extent of the fill gradient (0 to 1): 1 fades across the area's full height, lower values reach gradientToOpacity sooner, nearer the top.

Default

1

Fade the fill out over the bottom N% of the area's height (0 to 100): 100 fades across the full height, 0 keeps the fill flat. Replaces gradientToOpacity and gradientSpan when set.

Show the value above sampled points, as text labels that share one count and one collision pass across every Area that shows them, stay inside the plot and skip what does not fit.

Default

false

Preferred minimum number of value labels per series; the room and collisions can lower it.

Default

2

Maximum number of value labels per series. 0 hides them all. Defaults to what the plot width allows.

Formats a value label. Defaults to an English integer such as 12,400.

Type

(value: number) => string

Color of the value labels. Defaults to the series stroke.

Fade the value labels with the series' fadeEdges.

Default

false

Fade the area toward transparent at the chart edges. true fades both ends, "left" or "right" fades one side, and { left, right } sets each side's fade zone as a percentage of the plot width (0-50).

Default

false

Draw a circle marker at every data point.

Default

false

Styling of the point markers drawn by showMarkers. See SeriesPointMarkerStyle.

Type

Readonly<SeriesPointMarkerStyle>

Draw a highlighted segment of the top line around the hovered point.

Default

true

Data index from which the top line is drawn dashed (inclusive).

Dash pattern of the dashed tail when dashFromIndex is set.

Default

"6,4"

Whether the point markers animate in. The area itself always enters with the chart's animationDuration.

Default

true

Show the loading pulse overlay on this area. When unset, the pulse follows the chart's status. Set false to disable it.

Stroke color of the loading pulse overlay.

Default

"var(--chart-foreground)"

Stroke opacity of the loading pulse overlay.

Default

0.5

Phase of the loading pulse: "loop" repeats, "exit" plays the loading to ready transition, "enter" plays ready to loading.

Default

"loop"

Loading animation: a travelling "pulse" or a diagonal "sweep" shimmer.

Default

"pulse"

Where the area's fill and line draw: "svg", paths, or canvasRenderer, a bitmap the chart's canvas series share, for tens of thousands of points (the grid, axes, hover highlight, markers, crosshair and tooltip stay SVG). On a canvas the area dims with the others on hover (a legend can't dim it alone) and its fill draws to the plot's edges (fadeEdges is an SVG mask).

Default

"svg"

Key of the data field that holds the bar heights.

Name of the series in the default tooltip row. Defaults to dataKey.

Id of the y scale the bars stand on. An id without a YAxis is a hidden scale, handy for volume bars under a price. Stacked bars stack with the bars of their axis.

Type

string | number

Default

"left"

Fill color of the bars.

Default

"var(--chart-line-primary)"

Color of the tooltip dot, for when fill is a gradient or pattern. Defaults to fill.

Corner radius of the bars in px.

Default

0

Grow the bars from the baseline on entrance.

Default

true

Opacity of the bars that are not hovered while another x position is focused.

Default

0.3

Key of the data field that holds this line's y values.

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 color of the line.

Default

"var(--chart-line-primary)"

Stroke width of the line in px.

Default

2.5

d3-shape curve factory used to interpolate between points.

Default

curveNatural

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"

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

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).

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

Draw a highlighted segment of the line around the hovered point.

Default

true

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>

Draw a circle marker at every data point.

Default

false

Styling of the point markers drawn by showMarkers. See SeriesPointMarkerStyle.

Type

Readonly<SeriesPointMarkerStyle>

Data index from which the line is drawn dashed (inclusive). Useful for marking an incomplete or projected period.

Dash pattern of the dashed tail when dashFromIndex is set.

Default

"6,4"

Stroke color of the loading pulse overlay.

Default

"var(--chart-foreground)"

Stroke opacity of the loading pulse overlay.

Default

0.5

Whether the point markers animate in. The line itself always enters with the chart's animationDuration.

Default

true

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.

Phase of the loading pulse: "loop" repeats, "exit" plays the loading to ready transition, "enter" plays ready to loading.

Default

"loop"

Loading animation: a travelling "pulse" or a diagonal "sweep" shimmer across the skeleton line.

Default

"pulse"

Called each time a "loop" pulse cycle completes.

Type

() => void

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"

Show the date pill that rides along the bottom of the plot.

Default

true

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

Show a dot on every series at the hovered position.

Default

true

Dot style: a filled "dot" or a transparent "ring" square. Read by BarChart only.

Type

"dot" | "ring"

Default

"dot"

Dot radius in px.

Default

5

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

Multiplier applied to the dot or ring size. Read by BarChart and LiveLineChart.

Default

1

Stroke width of the dots in px.

Default

2

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)"

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

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

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 }[]

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)

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.

Extra class name for the tooltip panel.

Spring for the floating panel when matchCrosshair is on. Defaults to the chart's tooltip spring.

Make the floating panel follow the pointer with the same spring as the crosshair instead of damping.

Default

false

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

Dash pattern of the crosshair. Omit for a solid line.

Vertical fade of the crosshair: both ends, the top, the bottom, or none (solid).

Default

"both"

Size of the crosshair's fade, as a percentage of its height (2 to 40).

Default

10

Bottom colour of the crosshair: it ramps from indicatorColor at the top to this at the bottom (composes with the fade).

How far down the crosshair reaches: the whole plot, or down to the hovered point of the first series.

Type

"plot" | "point"

Default

"plot"

Blur in px on the dots' halo, for a soft glow.

Default

0

Extra gap in px between the top of the plot and the tooltip panel.

Default

0

The date pill's text for each data row, in row order (pair it with XAxis labels).

Spring for the floating panel. Takes priority over matchCrosshair and damping.

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.

Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts. Set --chart-tooltip-background instead.

Thickness of the crosshair: a width in px, or "line" (1px), "thin" (2px), "medium" (4px) or "thick" (8px).

Default

"line"

Accepted for bklit-ui compatibility. It has no effect in bklit-tanstack-charts.

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

The tick text of each data row, in row order: it replaces the date formatting (pair it with ChartTooltip dateLabels).

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

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"

Formats a tick date into its label. Defaults to a short month and day such as "Jan 5".

Type

(value: Readonly<Date>) => string