Profit and Loss Line Chart with Legend

Type

number | null

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

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 numeric series in the chart data. Values at or above zero use positiveColor, values below use negativeColor.

Accepted so bklit-ui code compiles. Not read: the line uses the chart's xDataKey.

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

Stroke width in px.

Default

2.5

Color above zero.

Default

"var(--chart-positive)"

Color below zero.

Default

"var(--chart-negative)"

d3 curve factory used to draw the line.

Default

`curveLinear`

Accepted so bklit-ui code compiles. Not read: a profit/loss line never fades its ends.

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.

Controlled hovered item: 0 is Profit, 1 is Loss, null is none.

Type

number | null

Default

null

Called with the hovered item index (0 Profit, 1 Loss), or null when the pointer leaves.

Type

(index: number | null) => void

Horizontal alignment of the legend.

Type

"start" | "center" | "end"

Default

"start"

Extra class names added to the legend wrapper.