The default for anything measured over time. One series or several, on linear or log paper, with regions, bands, annotations, and guides.
Usage
import { Line } from "diagrammatic";
<Line labels={["Jan", "Feb", "Mar"]} data={[34, 46, 40]} />;Line renders on the server. Pass data for one series or series for several; labels names the points on the x axis.
Examples
One series
A single series draws in ink with its last value printed at the end of the line.
Several series
Two or more named series take the categorical palette in order and get a legend. Past four lines, consider small multiples.
Steps
step holds each value until the next one, for quantities that change in discrete jumps: seats, prices, replica counts.
Regions and annotations
regions shades a span of the x axis in index units, and marks pins a label to a point. Together they tell the reader why the line moved.
Uncertainty bands
bands takes a lower and upper array per series and draws the range under the line, for forecasts and confidence intervals.
Thresholds
guides draws reference lines on either axis: an SLO on the value axis, a deploy on the x axis.
Log scale
yScale="log" puts growth that spans decades on one frame. A tick count on log paper counts decades.
Uneven x positions
xs places points at numeric x positions instead of evenly, and xScale="log" spaces them logarithmically, as a scaling curve needs.
Survival curves
A step line with marks of kind: "censor" is a Kaplan-Meier plot: the ticks mark where observation stopped without an event.
Interaction
These examples wrap the server-rendered chart in diagrammatic/interactive. See Interaction for the full API.
Tooltip
The tooltip receives the hovered point's index and looks the value up in your data.
Highlight a series
A controlled highlight fades every other series; highlightOnHover="series" does the same while the pointer rests on a line.
Select a point
onMarkClick reports the clicked point's address, and a controlled highlight keeps the selection visible.
#4804 took 9.8 min: cold cache after the runner image bump. Click a point to inspect another build.
Live data
The chart is a pure function of its props, so streaming data is a state update. This one appends a reading every second, and data-dg-motion pulses the latest point while it runs. See Motion.
Fluid width
Fit measures its box and hands the width down, so the frame is laid out again at every width and the type stays at 11px. Resize the window.
From a spec
The same chart as JSON, for a model to write. See Charts from a model.
When to use it
- Use it for trends, rates, and anything measured on a continuous timeline.
- Watch out for more than four lines, which turn to spaghetti; facet into small multiples instead. For a quantity that accumulates, an area reads better.
Props
- data?number[]
One series of values. Use `series` for several.
- series?{ name: string; data: number[] }[]
Named series, colored in palette order. Two or more get a legend.
- labels?string[]
One label per point on the x axis. An empty string skips a label.
- xs?number[]
Numeric x positions, one per point, instead of even spacing.
- xScale"linear" | "log"= "linear"
The x scale when `xs` is given.
- yScale"linear" | "log"= "linear"
The value scale.
- yMax?number
Fixes the top of the value axis, so several charts share a scale.
- xTicks?number | { at: number; label: string }[]
A tick count or an explicit ladder on the x axis.
- yTicks?number | { at: number; label: string }[]
A tick count or an explicit ladder on the value axis. Unset draws no value axis.
- stepboolean= false
Holds each value until the next point.
- regions?{ from: number; to: number; label?: string }[]
Shaded spans of the x axis, in index units or `xs` units.
- bands?{ lower: number[]; upper: number[] }[]
A range under each series, in series order.
- marks?{ at: number; series?: string; label?: string; kind?: "point" | "censor" }[]
Annotations pinned to points. `kind: "censor"` draws a censoring tick.
- guides?{ at: number; axis?: "x" | "y"; label?: string }[]
Reference lines. The value axis by default.
- legend?boolean
The in-figure legend. On when there are two or more series.
- format(value: number) => string= formatCompact
Formats printed values and tick labels.
- title?string
Names the chart for assistive technology. See Accessibility.
- summary?string
A sentence read after the title.
- widthnumber= 640
Rendered width in CSS pixels. See Sizing.
- height?number
Rendered height in CSS pixels. Defaults to `width / aspect`.
- aspect?number
Width over height when `height` is not given.
- fontSizenumber= 11
The type size in CSS pixels.
- view?{ x: number; y: number; w: number; h: number }
A window onto the figure, from `Zoom`.
Every other SVG attribute, event handler, style, and ref passes through to the root svg.