Line Chart

One of 9 Recharts wrappers, styled entirely with Sakani's chart tokens.

A single series is drawn in chart/2, not chart/1. That looks like an off-by-one but it's deliberate: Figma's own default line is chart/2, and the second line added by multiple is chart/1, so the two-series case matches the design file. Three or more series continue in plain chart/3 order.

Curve styles

step is the honest choice for values that hold and jump (a plan tier, a headcount) where a smooth curve would imply readings that never happened. linear joins the real points without smoothing between them.

defaultsmooth monotone curve

linearstraight segments

stepstaircase

Point markers

All three keep dots visible at rest rather than only on hover. Use them when the individual readings matter as much as the trend, which is usually the case with six points and rarely the case with sixty.

dotsfilled markers in the series color

custom-dotsringed / halo markers

dots-colorseach dot cycles the full palette

Value labels

label prints the plotted number above each point. custom-label prints whatever field labelKey names instead, for when the useful caption isn't the value itself.

labelthe plotted value

custom-labellabelKey="item"

Multiple series

Props

Prop	Type	Default	Description
data	Record<string, string \| number>[]		Rows keyed by label plus one field per series.
series	string[]		Which fields in data to plot as lines.
xKey	string	'label'	Field used for the x-axis.
variant	'default' \| 'linear' \| 'step' \| 'multiple' \| 'dots' \| 'custom-dots' \| 'dots-colors' \| 'label' \| 'custom-label'	'default'	Line style. Every variant is a Recharts type/dot/label combination, not hand-rolled SVG.
labelKey	string		Field read for the text shown per point when variant is 'custom-label'.
size	'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Preset height: 180, 240, 320, 420.
height	number		Pixel height override, takes precedence over size.
showLegend	boolean	false	Shows a legend below the chart.

PreviousCalendar NextArea Chart