Simple, responsive charts, drawn in SVG and styled with CSS. Tiny, typed, and happy without a build step.

chartist.dev · Getting started · API · Examples · Plugins · Changelog

Coming from Chartist 1? Your code keeps working. Coming from 1.x shows what's new, and the 1.x docs are at chartist.dev/v1/.

npm install chartist

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

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

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

No bundler? Chartist is a native ES module:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/chartist@2/dist/index.min.css"
/>
<div id="chart" class="ct-golden-section"></div>
<script type="module">
  import { lineChart } from 'https://cdn.jsdelivr.net/npm/chartist@2/dist/index.min.js';

  lineChart('#chart', { series: [[1, 3, 2, 5]] });
</script>

• Style it with CSS. Plain SVG with predictable classes and custom properties for colors, lines and labels. No theme engine.
• Responsive, two ways. Options that change with media queries, or with the chart's own container.
• Composed charts. Bars and lines in one chart, on as many axes as you need.
• Renders anywhere SVG does. Render on a server, with real SVG text labels, for PDFs, email and images.
• Extend everything. Every element passes through an open pipeline you can hook into, and the community's plugins keep working.
• Tiny and typed. Written in TypeScript, no dependencies, and you ship only what you import.

Your 1.x code keeps working: the chart classes draw what they drew before. 1.x events and plugins work with chartist/compat. The classes are deprecated, and 3.0 removes them from chartist. Coming from 1.x explains what changed and how to move to the functions.

Cube sponsors Chartist's maintenance. Thank you!

This repository holds the library (packages/chartist), its docs site at chartist.dev (apps/docs), the examples and the playground, in an Nx and pnpm monorepo. Clone it, run pnpm install, and run tasks through Nx, for example pnpm nx test chartist or pnpm nx dev docs. CONTRIBUTING.md has the setup, the tests and the submission guidelines.

Dual-licensed under MIT or WTFPL, at your choice.