Line charts

A line chart draws each series as a line through its points, one point per label. That’s the whole idea, and most of this page is about the switches around it: fill the area below, smooth the line or keep it straight, leave gaps where data is missing, or drop the line and keep the dots.

lineChart() takes a container, your data and options. The data shapes (plain arrays, series objects, { x, y } values) are the same for every chart type and live in Data and options.

Lines, points and areas

By default you get a smooth line with a point on every value. Three options switch the parts on and off:

Option	Default	What it draws
`showLine`	`true`	The line, a `ct-line` path
`showPoint`	`true`	A `ct-point` for every value
`showArea`	`false`	The `ct-area` below the line

Turn on showArea and you have an area chart:

src/main.ts

import 'chartist/styles.css';
import { lineChart } from 'chartist';

lineChart(
  '#chart',
  {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [[5, 9, 7, 8, 5, 3, 5]]
  },
  { showArea: true }
);

Live

The area closes at areaBase, which is 0 by default. If 0 is outside the axis range, as in this example, the area closes at the edge of the chart instead. Its opacity, like every other color and size, is set in CSS: see Styling with CSS.

Smooth or straight

Lines are smooth by default. The default curve is a monotone cubic spline: it passes through every point and never swings above or below your data between two points, so a smooth line doesn’t invent peaks. Set lineSmooth: false for straight segments.

Options also work per series. Give a series a name, and the series option takes overrides by that name for lineSmooth, showLine, showPoint, showArea and areaBase:

src/main.ts

import 'chartist/styles.css';
import { lineChart } from 'chartist';

lineChart(
  '#chart',
  {
    labels: ['6am', '9am', '12pm', '3pm', '6pm', '9pm'],
    series: [
      { name: 'smooth', data: [11, 15, 21, 23, 18, 14] },
      { name: 'straight', data: [6, 9, 14, 15, 11, 8] }
    ]
  },
  {
    series: {
      straight: { lineSmooth: false }
    }
  }
);

Live

Pick your curve

lineSmooth also takes an interpolation function, for a different curve or to tune one. They’re all in the Interpolation namespace, and each is a factory that takes options:

Function	Options	The line
`Interpolation.monotoneCubic()`	`fillHoles`	Smooth and never past the data. The default for `lineSmooth: true`.
`Interpolation.cardinal()`	`tension` (`1`), `fillHoles`	A Catmull-Rom spline: rounder, but it can overshoot when values change quickly.
`Interpolation.simple()`	`divisor` (`2`), `fillHoles`	Curves with horizontal handles: hits every point, never overshoots, less flowing.
`Interpolation.step()`	`postpone` (`true`), `fillHoles`	Steps. With `postpone`, the line holds each value until the next point; `false` jumps to the next value right away.
`Interpolation.none()`	`fillHoles`	Straight segments. The same as `lineSmooth: false`.

import 'chartist/styles.css';
import { Interpolation, lineChart } from 'chartist';

lineChart(
  '#chart',
  {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [[1, 3, 3, 2, 4]]
  },
  { lineSmooth: Interpolation.step() }
);

The step line draws its corners as extra points, so with showPoint on you’ll see a dot at every corner. The two splines need at least three values in a row; with fewer they draw straight segments.

Gaps in your data

Missing a value? Put null where it would be. The line stops before the gap and starts again after it, with no point in between. A series shorter than the labels ends early.

src/main.ts

import 'chartist/styles.css';
import { lineChart } from 'chartist';

// The sensor was offline on Wednesday and Thursday.
lineChart('#chart', {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  series: [[4, 6, null, null, 5, 7, 6]]
});

Live

That’s honest: the chart doesn’t pretend to know what happened on Wednesday. With showArea, each piece of the line gets its own area. If you’d rather bridge the gap, every interpolation function takes fillHoles: true and connects the values on either side:

import 'chartist/styles.css';
import { Interpolation, lineChart } from 'chartist';

lineChart(
  '#chart',
  {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [[4, 6, null, null, 5, 7, 6]]
  },
  { lineSmooth: Interpolation.monotoneCubic({ fillHoles: true }) }
);

Scatter plots

A scatter plot is a line chart without the line. Give each value an x and a y, use a scale for the X axis instead of the labels, and set showLine: false:

import 'chartist/styles.css';
import { autoScaleAxis, lineChart } from 'chartist';

lineChart(
  '#chart',
  {
    series: [
      [
        { x: 1, y: 2 },
        { x: 2.5, y: 7 },
        { x: 4, y: 3 },
        { x: 7, y: 8 },
        { x: 10, y: 4 }
      ]
    ]
  },
  {
    showLine: false,
    axisX: { type: autoScaleAxis() }
  }
);

Without axisX.type, the X axis has one step per label and the points sit in label order, whatever their x. The axis types and their options are explained in Axes and scales.

From edge to edge

The X axis divides the width into one step per label and puts each point at the start of its step, so the last point stops short of the right edge. fullWidth: true stretches the line across the whole width. The last label then sits on the edge, so give it room with chartPadding:

src/main.ts

import 'chartist/styles.css';
import { lineChart } from 'chartist';

lineChart(
  '#chart',
  {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [
      [5, 9, 7, 12],
      [3, 4, 6, 5]
    ]
  },
  {
    fullWidth: true,
    // Room for the last label, which now sits on the right edge.
    chartPadding: { right: 40 }
  }
);

Live

Low and high

The Y axis fits your data. Set low and high to fix either end, for example to start at zero or to keep several charts on the same scale:

import 'chartist/styles.css';
import { lineChart } from 'chartist';

lineChart(
  '#chart',
  {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [[61, 64, 62, 67, 66]]
  },
  { low: 0, high: 100 }
);

Ticks, label formats and the other axis settings are in Axes and scales.

In the API reference: lineChart and its options.

Next: bar charts, or make your lines respond to the screen.