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 curvelinearstraight segmentsstepstaircasePoint 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 colorcustom-dotsringed / halo markersdots-colorseach dot cycles the full paletteValue 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 valuecustom-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. |
Why it works this way
Why
- A single series is drawn in chart/2, not chart/1. It looks like an off-by-one but is deliberate: Figma's default line is chart/2 and the second line added by multiple is chart/1, so the two-series case matches the design file.
- step is the honest choice for values that hold and jump, such as a plan tier or headcount, where a smooth curve would imply readings that never happened.
- Point markers suit charts where individual readings matter, which is usually true with six points and rarely with sixty.
Don't
- Don't use a smooth curve for values that jump. Use step.
- Don't show markers on a dense series. They turn into noise.