Chartist

Search

Find a guide, an API entry or an example.

Try

Simple line chart

Three series, Monday to Friday, stretched to the full width.

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

lineChart(
  '#chart',
  {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    series: [
      [12, 9, 7, 8, 5],
      [2, 1, 3.5, 7, 3],
      [1, 3, 4, 5, 6]
    ]
  },
  {
    fullWidth: true,
    chartPadding: {
      right: 40
    }
  }
);
Live
Open in the playgroundView as MarkdownSwitch to 1.x above the code to see the same chart written with the Chartist 1.x classes.