Home/ Cookbook/ Charts/ Single-series line

Draw a single-series line chart

By the end of this recipe you'll have a clean line chart showing one metric over time — axes, gridlines, a smooth curve and a hover-friendly data layer — small enough to drop into a stat-hero card or a full-bleed dashboard panel.

Charts Intermediate ~10 min React · @corelithzw/react

Overview

One metric. One axis of time. One line. The chart you reach for first, and the one you should default to whenever you're unsure.

A single-series line is the baseline analytics chart. Use it when the question is "how is this number moving?" — revenue per day, signups per week, cash on hand per month. The eye reads slope without effort, so trends and inflections leap off the page before the reader has parsed a single label.

Skip a line if your x-axis isn't ordered (categories, products, regions — use bars instead), or if you'd be plotting fewer than four points (a sparkline reads better in tight spaces, a single big number is more honest still).

Default opinion: a single thin line on a quiet grid beats a hero chart every time. Add fill, dots, or a second series only when the question demands it.

The chart

Daily revenue across one month. Smooth curve, four y-ticks, a soft area fill that hints at total without overpowering the slope.

Daily revenue

Required pieces

Everything this recipe pulls from @corelithzw/react.

PrimitiveChart BlockStat hero BlockCard

Intended exports used here: Chart.Line, Chart.Axis, Chart.Grid, StatHero, Card.

Roadmap. Chart.* sub-components are planned for @corelithzw/react v0.2. The snippets below show the intended API; until ship, render the SVG you see above inline (or use any headless chart library — the recipe's data shape is what we're committing to).

The React snippet

Minimal opinionated API. data is an array of points, xAccessor/yAccessor are keys, and the chart picks sensible axes for you.

RevenueLine.tsx@corelithzw/react

Customising

Three of the most common forks — colour, axes, animation. Each is a small diff from the snippet above.

Recolour for a tone

Swap the brand stroke for a success or danger tone when the metric itself carries a positive or negative connotation.

<Chart.Line
  data={data}
  color="success"     {/* brand | success | danger | info */}
  areaFill
  height={240}
/>

Tweak the axes

Hide the y-axis labels for a more "sparkline" feel inside a stat-hero, or pin the y-domain so the line doesn't visually wobble between renders.

<Chart.Line
  data={data}
  yDomain={[0, 5000]}
  axes="x"             {/* "x" | "y" | "both" | "none" */}
  grid="horizontal"
  height={240}
/>

Animate on mount

Draw the line from left-to-right on first paint. Keep it under 600ms — anything longer reads as decoration, not data.

<Chart.Line
  data={data}
  animate="draw"       {/* "draw" | "fade" | "none" */}
  animateMs={420}
  height={240}
/>

In context

The same chart, dropped inside a stat-hero. The big number reads first; the line gives the trend behind it.

Revenue · last 30 days

May 2025

$4,820 +168% vs. prev. period