Line Chart with Deadline Fills

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"

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