Line Chart

6 cardsHeight 2 units

Lines are drawn on 3–4 ticks fitted to the value range and a light solid grid. A single line gets a light shade underneath, and the line shape is smooth, straight or stepped.

Line - Basic

line-basic

A card with one line, vertical-axis ticks and a light solid grid. Use it to read one metric's course along with its values per period.

Judgment built in (3)
  • The vertical axis does not start at zero; it wraps the value range in round-number ticks. A line is read by its slope, and drawn from zero the change flattens out. The shade under the line fades toward the bottom so it is not read as size.
  • Only 3–4 ticks are drawn and the unit is written on the top tick only; period names are thinned to about five, always keeping the last. The dot and value are written only for the last period.
  • The line shape is set with curve. The default smooth curve joins the points without overshooting the real values, and "step" is for metrics such as interest rates or unit prices that hold until the next change.

Line - Tabs

line-tabs

A card with tabs under the head that carry the headline figures of 2–3 metrics and draw only the chosen metric's line. Use it to switch between metrics with different units in one spot.

Judgment built in (3)
  • Metrics with different units are split into tabs rather than overlaid on one plot. Amounts, counts and percentages on one axis either need two axes or hide the small values' movement.
  • Each tab shows the metric's name and headline figure, so the numbers are compared before the line is seen. The figure is the last period's value and can be changed per tab with value.
  • The tabs split the width into three equal cells, up to three tabs. From the fourth on, the cells become too narrow for the numbers, so split the card.

Line - Multiple

line-multiple

A card with 2–3 lines in different colors. Use it to compare the course of one metric split across a few items.

Judgment built in (3)
  • Line colors are orange, pink-red and blue, in that order. Yellow is not used for lines: as a thin line on white its contrast is only 1.5:1.
  • Up to three lines get a color. From the fourth item on, lines are light gray and folded into 'n others' in the legend, so colors do not multiply until they stop telling apart.
  • There is a legend, and the last value is written at the end of each line. Where end values overlap, the later item's value is dropped, and the tooltip lists that period's values from largest to smallest.

Line - Compare

line-compare

A card that overlays this year's line and last year's gray line on the same month axis. Use it to compare a seasonal metric with the same month last year.

Judgment built in (3)
  • The horizontal axis runs January to December and the two years overlap. Drawn as 24 months in a row, the same-month differences would have to be read by eye.
  • Last year, the baseline, is gray; only this year is orange. This year's line stops at the last finished month, and the remaining months show only last year's line, previewing the seasonal course ahead.
  • The tooltip gives both years' values and the year-over-year change, and this year's last value is written above its dot.

Line - Cumulative

line-cumulative

A card that overlays this month's and last month's cumulative totals on the same day axis, with a target line. Use it to compare the pace toward a monthly target with last month.

Judgment built in (3)
  • Give daily values and the card accumulates them. A running total stacks up from zero, so the vertical axis starts at zero too.
  • The pace toward the target is read against last month's cumulative line, not a straight line. With weekends and holidays, daily results are uneven, and a straight-line pace makes every month look behind at the start.
  • The tooltip gives both months' totals to that day, the change versus the same day last month, and the attainment rate. The target line's name and value sit at its right end.

Line - Reference

line-reference

A card with one line and a reference line such as a target or an average. Use it to see whether each period crossed the reference.

Judgment built in (3)
  • The reference line is dashed, with its name and value at its right end outside the plot so they do not overlap the line. Write "avg" instead of a number in value to draw the period average.
  • The vertical axis range always includes the reference line. Even when the values sit far from the reference, the line is never pushed off the card.
  • The tooltip gives that period's value and its difference from the reference. For ratio metrics the difference is in percentage points.