# Line chart

> Change over time: curves, steps, points and the last value.

Source: https://82chart.com/en/docs/line/

`type: 'line'` is the default. Hovering shows a vertical crosshair and one tooltip with every series at that x. A single line gets its last value labelled (`lastPoint`).

```js
createChart('#chart', {
  type: 'line',
  title: 'Monthly visitors',
  smooth: true,
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
    series: [
      { name: 'This year', data: [41200, 43800, 52100, 49800, 61200, 66400, 71800, 69500, 74300, 80100] },
      { name: 'Last year', data: [36500, 35200, 40100, 42800, 47900, 51300, 55100, 53800, 58200, 60400], dashed: true },
    ],
  },
});
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `curve` | 'straight' | `'straight' \| 'smooth' \| 'step'`; smooth is monotone and never overshoots the data |
| `smooth` | false | Same as `curve: 'smooth'`; on a series, just that series |
| `points` | 'auto' | Show points; auto shows them up to 30 points |
| `pointShape` | 'circle' | `'circle' \| 'square' \| 'diamond'` |
| `lastPoint` | true for one line | Highlight the last point |
| `nulls` | 'gap' | Missing values: `'gap' \| 'connect' \| 'zero'` |
| `dataLabels` | false | `true` or `'end'`: the value at the end of each line only |

## Step lines

Data that holds until it changes (prices, stock levels) reads correctly with `curve: 'step'`.

```js
createChart('#chart', {
  type: 'line',
  title: 'Stock on hand',
  curve: 'step',
  points: true,
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [{ name: 'Stock', data: [120, 120, 85, 85, 140, 132, 132] }],
  },
});
```