Chartist

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/.

Install

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>

Why Chartist

• 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.

Coming from 1.x

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.

Community wrappers

Chartist needs no wrapper: a chart is a container and a function call, and Charts in frameworks has recipes for React, Vue, Angular and Svelte, with server rendering. If you'd rather use a component, the community wraps Chartist for these stacks. Thank you to everyone who built them!

Stack	Wrapper	Built for
React	react-chartist	Chartist 1.x
Angular	ng-chartist	Chartist 1.x
Vue	vue-chartist	Chartist 0.x
Node.js	node-chartist	Chartist 0.x
Ember	ember-cli-chartist	Chartist 0.x
Java (JSF)	ChartistJSF	Chartist 0.x
Vue 2	v-chartist	Chartist 0.x
R	chartist (htmlwidget)	Chartist 0.x
Meteor	mfpierre:chartist-js	Chartist 0.x
WordPress	TablePress Extension: Chartist	Chartist 0.x
Blazor	UnlockedData.Chartist.Blazor	Chartist 0.x
Angular	ngx-chartist	Chartist 0.x
Ruby on Rails	chartist-rails	Chartist 0.x

Wrappers built for 1.x run on v2: see Community wrappers for the npm overrides entry they need until they allow chartist@2. Maintain a wrapper that's missing here? Send a pull request.

Supported by

Cube sponsors Chartist's maintenance. Thank you!

Contributing

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.

License

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