Line Chart with Date Highlights and Brush

The full dataset. The brushed range starts as its extent and resets when this changes.

Type

Record<string, unknown>[]

Key of the date field in each row.

Default

"date"

Extends the brushable range past the last data point to this date.

Turn the brush on. When false, the main chart shows all data and the strip is not rendered.

Height of the brush strip in px.

Pack the main chart and strip tightly at the top instead of stretching the main chart to fill the height.

Default

false

Class names added to the layout container.

Render function for the main chart. Receives the layout state.

Type

(layout: ChartBrushLayoutState) => ReactNode

Render function for the brush strip, shown below the main chart when enabled. Receives the layout state.

Type

(layout: ChartBrushLayoutState) => ReactNode

The rows to plot. Each row is an object holding 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, such as a timestamp).

Default

"date"

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

Duration of the entrance reveal in milliseconds. 0 skips the animation.

Default

1100

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 }

CSS aspect ratio of the chart ("width / height" or a number), applied to the container width.

Default

"2 / 1"

Extra CSS class name for the chart container.

Called with "loading" or "ready" when status changes (and once on mount).

Type

(phase: ChartPhase) => void

The layers to draw: Grid, Line, XAxis, YAxis, ChartTooltip and the other chart children.

Text shown centered over the chart, with a shimmer, while status is "loading". Nothing is shown when it is unset or empty.

Inline styles for the chart container, for example a fixed height for a brush strip.

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

Animate the y domain when the data or status changes instead of jumping to the new scale.

Default

true

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

Duration in milliseconds of the y-domain tween (a data update, the loading to ready handoff, a brushed window).

Default

500

Visible x range as [start, end], used for brush zoom. The chart plots only this range of data.

Length of the full dataset while xDomain zooms into part of it. It keeps the x spacing consistent with the unzoomed chart.

Accepted for bklit-ui compatibility. It has no effect.

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.

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.

Changing this string replays the entrance animation. Do not change it when only the data changes.

Accessible name of the chart.

Default

"Line chart"

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

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.

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

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

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

The marker line's date: the region's left edge.

Where the region ends. Defaults to the plot's right edge.

The line's and the region's color.

Default

"var(--chart-negative, var(--color-red-500))"

The region's fill: diagonal stripes, a gradient, a flat color, or "none" for the line alone.

Default

"pattern"

The region's opacity. Defaults to 0.6 for pattern, 0.25 for gradient, 0.12 for solid.

gradient only: the opacity at the region's right edge.

Default

0

The pattern preset when fillType is "pattern".

Default

"diagonal"

The pattern tile's scale.

Default

1.5

The stripes' width.

Default

1

Fade the region out towards its right edge.

Default

true

The fraction (0 to 1) of the region, from its right edge, that fades.

Default

0.5

Draw the vertical marker line.

Default

true

The line's color. Defaults to color.

The line's width.

Default

1

The line's dash pattern. Solid by default.

The line's opacity.

Default

1

Text beside the line (it flips to the line's left near the plot's right edge).

Where the label sits.

Type

"top" | "bottom"

Default

"top"

The label's color. Defaults to color.

Category (bar) charts only: the data key holding each row's date. Defaults to the first field holding a Date or "YYYY-MM-DD" string.

Class on the deadline's marks.

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"

Accepted so bklit-ui code compiles. The brush is always horizontal: the native brush is brushX only, and the selection is a time range (bklit reports only the x extent too, chart-brush.tsx:270-288).

Type

"horizontal" | "vertical" | "both"

Accepted so bklit-ui code compiles. Has no effect (bklit ignores it as well, chart-brush.tsx:262). Use initialSelection to set the window.

Type

ChartBrushSelection | null

Accepted so bklit-ui code compiles. Has no effect.

Called while the window is dragged or resized, with the selected range, or null when the selection collapses to nothing (which resets to the full range). Escape cancels a drag and reports the previous range. The range is slightly widened (about 2 px per side) so a full drag covers the end points.

Type

(selection: { readonly start: Readonly<Date>; readonly end: Readonly<Date> } | null) => void

Window shown on mount, for example the first half of the range. Changing it later does not move the window; it resets when the chart's data changes. It is reported through onSelectionChange on mount and after a data change (unless it is the full range), so a ChartBrushLayout's main chart starts zoomed to it.

Type

ChartBrushSelection | null

Styles the brushed window. Only color is applied by ChartBrush; use ChartBrushSelectionOverlay to draw a full pattern.

Accepted so bklit-ui code compiles. Has no effect.

Type

SVGProps<SVGRectElement>

Blur applied to the dimmed area outside the window, in px (clamped to 0-5).

Default

1.5

Fade the dimmed area out toward the outer edges of the strip.

Default

true

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.

The days that count as weekend, as Date#getDay() numbers (0 = Sunday); [5, 6] for Friday–Saturday weekends.

Default

[6, 0]

Diagonal stripes or a flat color.

Default

"pattern"

The stripes' or the fill's color.

Default

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

The fill's opacity. Defaults to 0.45 for pattern, 0.08 for solid.

The pattern preset when fillType is "pattern".

Default

"diagonal"

The pattern tile's scale.

Default

1.5

The stripes' width.

Default

1

"calendar" shades midnight to midnight; "centered" shifts the spans half a day so daily points sit mid-span; "auto" picks "centered" on a ComposedChart whose SeriesBar columns sit at midnight.

Type

"auto" | "calendar" | "centered"

Default

"auto"

Use UTC day boundaries instead of local time.

Default

false

Draw nothing while one day is narrower than this many pixels.

Default

2

Category (bar) charts only: the data key holding each row's date.

Class on the weekends' marks.

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

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.