Skip to content
Tattva

LineChart

Stable

A line chart for change over time. Lines are named at their ends and can be explored with the keyboard.

Also known as line graph, time series chart

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Two lines, named at their ends

  • Typical order
  • Slowest orders

A key shows for two or more lines. The names at the line ends repeat it. Click or tap the chart, or tab to it and use the arrow keys.

UsageCodeDesignAccessibility

When to use it

Shows change over time for up to five lines. Lines are named at their ends where there is room, so people do not have to look back and forth at a key.

Made of: Key · Side scale with 4 to 6 marks · Thin grid lines · Lines · End dots and names · Bottom labels · Guide line and pop-up

Use it for

  • A measure tracked over days, hours or months.
  • Comparing a few groups over the same time.
  • A forecast after real values: set where the projection starts.
  • Live data where the latest point may still change: turn on streaming.

Not for

  • Comparing amounts at one point in time: use BarChart.
  • A trend in a very small space: use Sparkline.
  • A best guess with a range: use DotPlot.

Do and avoid

Orders per day

Orders, last 5 days

Do. A title and unit say what the lines show.
Avoid. No title or unit, so nobody knows what the chart is about.

Do

  • Use it for change over time. Keep to four lines where you can.
  • Use solid lines for real numbers and dotted lines only for forecasts.
  • Put it in a ChartFrame with a summary and a table.
  • Switch to several small charts when lines bunch up and their names would overlap.
  • Group extra lines into one "Other" line. Lines after the fifth are not drawn.

Avoid

  • Don't put two different measures on one chart. Use two charts.
  • Don't add a sixth line. Group the smallest into one grey "Other" line.
  • Don't change the other colors when a filter removes a line. Each line keeps its color.
  • Don't use amber for a line. It is saved for things that need a person.

On a phone

  • The chart measures its container and redraws at that width, so it fills a phone screen.
  • Touch or drag on the chart to show the tooltip. Vertical swipes still scroll the page, and the tooltip stays until you tap elsewhere.
  • The tooltip flips to the left of your finger past the middle of the chart, and axis labels at the edges are pulled inward so they are not cut off.
  • Give the chart a height of about 200 to 240px on a phone, and it never goes below 160px.

Seen in products

  • Mailchimp uses solid lines for actuals and dotted lines for averages or projections, reported in the Supernova roundup.
  • The UK Analysis Function says to use multi-series lines only when essential and to prefer small multiples to many lines.
  • Datawrapper recommends direct-labeling lines instead of legends, and notes that dashes or dots can differentiate lines though they may read as projections.
  • The UK Analysis Function checklist keeps legend order matching chart order and limits light grey gridlines to at most 10.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started