Chartist

Search

Find a guide, an API entry or an example.

Try

Getting started

Your first chart in about two minutes. No build step, no bundler, no framework. An HTML file and a browser.

Add the stylesheet and a container

The stylesheet holds the default look: series colors, grid and labels. The container is any element; Chartist fills it with an SVG. The ct-golden-section class gives it a responsive aspect ratio.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/index.min.css"
/>

<div id="chart" class="ct-golden-section"></div>

Import Chartist and draw a chart

Import the chart type you need as a function and call it with the container, the data and, optionally, options. Labels go along the X axis; each array in series becomes one line.

<script type="module">
  import { lineChart } from 'https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/index.min.js';

  lineChart('#chart', {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [
      [12, 9, 7, 8, 5],
      [2, 1, 3.5, 7, 3]
    ]
  });
</script>

Open it in a browser

That’s it. Here’s the whole file, ready to save as index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My first chart</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/index.min.css"
    />
  </head>
  <body>
    <div id="chart" class="ct-golden-section"></div>
    <script type="module">
      import { lineChart } from 'https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/index.min.js';

      lineChart('#chart', {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
        series: [
          [12, 9, 7, 8, 5],
          [2, 1, 3.5, 7, 3]
        ]
      });
    </script>
  </body>
</html>

And this is what it draws, live. Press Edit and change a number. The editor knows Chartist’s types: point at a name to read what it takes, press Ctrl+Space for suggestions, and a mistake gets a red underline before you run it.

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

lineChart('#chart', {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [12, 9, 7, 8, 5],
    [2, 1, 3.5, 7, 3]
  ]
});
Live

Import Chartist by name

An import map tells the browser where chartist lives, so your code can import it by name, just like with npm. The same code then moves to a bundler unchanged, and plugins that import chartist find it too:

<script type="importmap">
  {
    "imports": {
      "chartist": "https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/index.min.js",
      "chartist/compat": "https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/compat.min.js"
    }
  }
</script>
<script type="module">
  import { lineChart } from 'chartist';

  lineChart('#chart', {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [
      [12, 9, 7, 8, 5],
      [2, 1, 3.5, 7, 3]
    ]
  });
</script>

The import map goes before the first module script. chartist/compat is only needed if you use the 1.x compatibility; it shares the core of the chartist entry, since compat.min.js imports index.min.js next to it.

Using npm

Same API, installed from npm. It works with Vite, webpack, Rollup, esbuild and Astro, and it’s written in TypeScript, so the types come with it.

npm install chartist@next
import 'chartist/styles.css';
import { barChart } from 'chartist';

barChart(
  '#chart',
  {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [
      [5, 4, 3, 7],
      [3, 2, 9, 5]
    ]
  },
  { stackBars: true }
);

Chartist only adds what you import to your bundle, so a single line chart stays small.

Make it yours with CSS

There’s no theme option. Charts are SVG with predictable classes, so you style them the way you style everything else. Custom properties cover the common cases, for the whole page, one container or one chart:

#chart {
  --ct-series-a: #0544d3; /* first series */
  --ct-line-width: 2px;
  --ct-grid-dasharray: none;
}

Where to next

Edit this page on GitHubView as Markdown