Line Chart

Mobile

Tablet

Desktop

Installation

pnpm add @blakeui/pro-react

npm install @blakeui/pro-react

yarn add @blakeui/pro-react

bun add @blakeui/pro-react

LineChart is built on visx for its scales and SVG and the motion library for the entrance reveal and hover animation — it does not use Recharts. Pass a data array (each point has a label field plus one numeric field per series) and compose the grid, axes, line series, and tooltip as children using dot notation. Series colors come from the categorical --chart-1 … --chart-5 tokens; the chart's chrome maps onto BlakeUI's neutral tokens automatically.

import {LineChart} from "@blakeui/pro-react";

const data = [
  {month: "Jan", online: 5200, retail: 8400},
  {month: "Feb", online: 7000, retail: 7800},
  // …
];

function App() {
  return (
    <LineChart data={data} xDataKey="month" valuePrefix="$">
      <LineChart.Grid horizontal />
      <LineChart.Line dataKey="online" name="Online" stroke="var(--chart-1)" />
      <LineChart.Line dataKey="retail" name="Retail" stroke="var(--chart-2)" />
      <LineChart.XAxis />
      <LineChart.YAxis />
      <LineChart.Tooltip />
    </LineChart>
  );
}

Anatomy

Import the LineChart component and access all parts using dot notation.

import {LineChart} from "@blakeui/pro-react";

<LineChart>
  <LineChart.Grid />
  <LineChart.Line />
  <LineChart.XAxis />
  <LineChart.YAxis />
  <LineChart.Tooltip />
</LineChart>;

Keyboard & motion

The chart is keyboard-accessible: focus it and use the left/right arrow keys (or Home / End) to move the crosshair across data points. The tooltip and category pill follow, and the active point is announced to screen readers through a live region. The entrance reveal, the value odometer, and the tooltip springs all respect prefers-reduced-motion — when it is set, the chart renders without animation.

Loading state

Set status="loading" to show a skeleton placeholder while data resolves; flip it to "ready" and the chart tweens its y-domain and reveals the series left-to-right. Choose the skeleton treatment with Line's loadingStyle — a pulse segment travelling the stroke, or a soft sweep band.

Mobile

Tablet

Desktop

Loading revenue…

API Reference

LineChart

The root wrapper. Measures its container, builds the point/value scales, and renders the SVG plus the hover layer.

Prop	Type	Default	Description
`data`	`Record<string, unknown>[]`	—	Chart data — one object per point, each with a label field and one numeric field per series.
`children`	`ReactNode`	—	Chart parts (`LineChart.Grid`, `LineChart.Line`,`LineChart.XAxis`, …).
`xDataKey`	`string`	`"name"`	Key in each point holding the x (category/label) value.
`margin`	`Partial<{ top; right; bottom; left }>`	`{ top: 40, right: 40, bottom: 40, left: 40 }`	Plot margins around the inner chart area.
`height`	`number`	—	Fixed pixel height. Overrides aspectRatio (e.g. for sparklines and KPI charts).
`aspectRatio`	`string`	`"2 / 1"`	CSS aspect ratio of the chart box (ignored when height is set).
`padding`	`number`	`0`	Outer padding of the point scale as a fraction of a step. 0 puts the first/last points flush on the plot edges.
`valuePrefix`	`string`	—	Static text rendered before each tooltip value (e.g. `$`).
`showGrid`	`boolean`	`true`	Render the `Grid` child. Set false to hide it without restructuring children.
`showXAxis`	`boolean`	`true`	Render the `XAxis` child.
`showYAxis`	`boolean`	`true`	Render the `YAxis` child.
`animationDuration`	`number`	`1100`	Entrance reveal duration in ms (cubic-bezier(0.85, 0, 0.15, 1)).
`status`	`"loading" \| "ready"`	`"ready"`	While loading, shows a skeleton and disables interaction. Flipping to ready plays the reveal.
`loadingLabel`	`string`	`""`	Centered caption shown while loading. Empty string hides it.
`yDomainTween`	`boolean`	`true`	Tween the y-domain (skeleton ↔ real data) during a status change instead of snapping.
`yDomainTweenDuration`	`number`	`500`	Duration of the y-domain tween in ms.

Also supports all native div HTML attributes.

LineChart.Line

A stroked series. Add one per metric; the y-domain fits across all series.

Prop	Type	Default	Description
`dataKey`	`string`	—	Key in each data point for this series' y values.
`stroke`	`string`	`cycles var(--chart-1..5)`	Stroke color.
`strokeWidth`	`number`	`2.5`	Stroke width.
`strokeDasharray`	`string`	—	SVG dash pattern (e.g. `"4 4"` for a dashed reference series). Omit for a solid line.
`curve`	`CurveFactory`	`curveNatural`	D3 curve interpolation factory.
`showDots`	`boolean`	`false`	Render a ring marker at every data point.
`fadeEdges`	`boolean`	`false`	Fade the stroke at the left/right edges of the plot.
`name`	`string`	`dataKey`	Legend/tooltip label for the series.
`loadingStroke`	`string`	`"var(--muted)"`	Skeleton stroke color while loading.
`loadingStrokeOpacity`	`number`	`0.5`	Skeleton stroke opacity while loading.
`loadingStyle`	`"pulse" \| "sweep"`	`"pulse"`	Skeleton treatment: a travelling pulse segment or a soft sweep band.

LineChart.Grid

Prop	Type	Default	Description
`horizontal`	`boolean`	`true`	Render horizontal grid lines.
`vertical`	`boolean`	`false`	Render vertical grid lines.
`numTicksRows`	`number`	`5`	Number of horizontal lines.
`numTicksColumns`	`number`	`5`	Number of vertical lines.
`stroke`	`string`	`"var(--separator)"`	Line color.
`strokeDasharray`	`string`	—	SVG dash pattern. Omit for solid lines.
`loadingStroke`	`string`	`stroke`	Grid line color while loading (dimmed to 0.5 opacity).
`shimmer`	`boolean`	`false`	Sweep a shimmer band across the grid while loading (pulse mode only).
`shimmerStroke`	`string`	`"var(--muted)"`	Shimmer band color.
`shimmerLength`	`number`	`140`	Shimmer band length in px.
`shimmerSpeed`	`number`	`1`	Shimmer speed multiplier (used when shimmerSync is false).
`shimmerSync`	`boolean`	`false`	Lock the shimmer rhythm to the pulse (2.2s traverse + 280ms pause).

LineChart.XAxis

Prop	Type	Default	Description
`numTicks`	`number`	`5`	Approximate number of ticks (always includes the first + last point).
`tickFormat`	`(category: string, index: number) => string`	—	Custom tick label formatter.

LineChart.YAxis

Prop	Type	Default	Description
`numTicks`	`number`	`5`	Approximate number of ticks.
`formatLargeNumbers`	`boolean`	`true`	Format values ≥ 1000 as compact (`12000` → `12k`).
`formatValue`	`(value: number) => string`	—	Custom tick formatter (overrides formatLargeNumbers).
`orientation`	`"left" \| "right"`	`"left"`	Side of the chart the labels render on.

LineChart.Tooltip

Declares the hover tooltip — the crosshair, per-series dots, the floating panel with interpolated values, and the category pill. Renders nothing on its own. Values roll through the shared odometer; prefix them with the root's valuePrefix.

Prop	Type	Default	Description
`showCrosshair`	`boolean`	`true`	Show the vertical crosshair line.
`showDots`	`boolean`	`true`	Show the per-series dots at the active point.
`showPill`	`boolean`	`true`	Show the animated category pill under the crosshair.

Theming

Series colors are driven by the categorical chart palette (--chart-1 … --chart-5) — set each series' stroke. All other chrome maps onto neutral/semantic tokens: grid lines use --separator, the crosshair and axis labels use --muted, and the tooltip panel uses --overlay with --overlay-shadow. Override any token in your theme to restyle the chart.