# charts.line-chart

A complete line chart as data: where the plot sits, both axes with their
ticks and labels, horizontal gridlines, one SVG path per series with its
colour, and a legend. Nothing is drawn; any renderer (SVG, canvas, a PDF
library, a native view) turns it into pixels, and because every number comes
from the same rules the chart is identical whether it was built in
TypeScript, Python or Rust.

It is assembled from the rest of the charts suite: `charts.extent`,
`charts.scale`, `charts.ticks`, `charts.format`, `charts.axis`,
`charts.shape`, `charts.layout` and `charts.palette`.

## The x axis

Give numbers in `x` or ISO dates in `dates`, never both. Numbers get a linear
axis across their exact extent, with nice ticks inside it; dates get a time
axis with ticks on day, week, month, quarter or year boundaries, whichever
gives about one tick per 80 pixels. Every series has one value per x, and
`null` is a gap that breaks the line. The x values need at least two
different values; a monotone curve also needs them strictly ascending.

## The y axis

The extent of every series together, stretched to include zero when `yZero`
is set, then widened to nice numbers by `charts.scale` niceDomain with about
one tick per 50 pixels (at least 2). A flat series is given a domain one unit
either side so it still has a height.

## The fixed layout rules

- Text is estimated at 7 pixels per character (12px sans-serif); no font is
  measured, so every language gets the same layout.
- A legend is shown only for more than one series: swatches 10 pixels, items
  16 pixels apart, rows 18 pixels high, wrapped within the chart width less 8
  pixels each side, starting 8 pixels from the top-left corner.
- Margins: top 12, or the legend's height plus 8 above and below it; right
  20; bottom 30 (tick 6, padding 3, a line of text); left fits the widest y
  label: 6 + 3 + 7 per character + 8.
- Ticks are 6 pixels, as d3's default. Gridlines run from the y axis across
  the whole plot width.
- Colours are the Okabe-Ito palette in series order (`charts.palette`),
  repeating after eight series. `legend[i]` and `lines[i]` are the same series.
- Curves: `linear` straight segments; `monotone` Fritsch-Carlson, which never
  overshoots the data (use it for smooth lines, never a spline that invents
  peaks); `step` with the step midway between points.

All pixel values are rounded to 2 decimal places, half away from zero.

A chart with no series, no values, a series of the wrong length, or a size
too small for its margins is an error rather than an empty picture.