Chartist: a small SVG charting library for people who style charts with CSS

The gap Chartist is aimed at: charts that behave like DOM, not like a canvas app

Chartist's README opens with a list of complaints about the charting libraries that already exist: they use canvas rather than SVG, they weigh hundreds of kilobytes, they are not flexible while keeping configuration simple, and they are not friendly to designers. That list is the product brief. The intended user is a web developer or designer who wants a chart to be a piece of markup that CSS can reach, not an opaque bitmap that needs its own theming API.

The scope is deliberately narrow. The README states that Chartist's single responsibility is helping you draw simple responsive charts using inline SVG in the DOM, with CSS for styling and JavaScript for configuration. It does not ship its own event handling, labels or behaviors, on the argument that plain HTML, JavaScript and CSS already solve those problems. If you have ever fought a charting library's tooltip markup, that sentence tells you which side of the trade you are choosing.

Inline SVG plus a configuration object: the mechanism behind a Chartist chart

A Chartist chart is constructed from three things: a selector or element to draw into, a data object with labels and series, and an options object. The README's Quickstart passes '#chart', a labels array, a single series array of numbers, and options containing high, low and an axisX.labelInterpolationFnc callback. That callback receives a value and an index and returns either the label or null, which is how the README thins out axis labels on small screens: every second label is dropped.

Because the output is inline SVG in the DOM, the parts of the chart are addressable. The README says Chartist relies on standards rather than reimplementing what browsers already do, and that it uses the DOM to provide parts of its functionality. The practical consequence is that a stylesheet can target the generated SVG, and the responsive behavior comes from the SVG and the surrounding layout rather than from a JavaScript resize handler you have to write.

The repository is TypeScript, and package.json points types at ./dist/index.d.ts, so consumers get declarations. The publish configuration exposes a CommonJS entry (./dist/index.cjs) and an ES module entry (./dist/index.js) through an exports map, with ./dist/* also exported. Note that in the repository itself main points at ./src/index.ts; that is the development entry, and the publishConfig block is what replaces it in the published tarball.

Installing Chartist and drawing a first bar chart

The README gives three package managers. Any of them produces the same package name.

pnpm add chartist
# or
yarn add chartist
# or
npm i chartist

Then import the chart type you want. The README imports BarChart by name from 'chartist' and constructs it against a selector. The third argument is the options object; high and low set the value range, and labelInterpolationFnc decides which axis labels survive.

import { BarChart } from 'chartist';

new BarChart('#chart', {
  labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
  series: [
    [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
  ]
}, {
  high: 10,
  low: -10,
  axisX: {
    labelInterpolationFnc: (value, index) => (index % 2 === 0 ? value : null)
  }
});

What you should see is a bar chart rendered as inline SVG inside the element matching #chart. The series contains negative values and the options set low to -10, so bars extend below the zero line. Halve the width of the container and the chart should reflow, because the drawing is SVG rather than a fixed-size canvas. The README does not document a separate stylesheet import in the Quickstart; package.json does declare a style field at ./dist/index.css and sideEffects entries for *.css and *.scss, which tells you styles ship with the package even though the README's first example omits them.

What you have to build yourself, and where Chartist is the wrong tool

The README is unusually direct about the omissions, and they are the main limitation. Chartist does not provide event handling, labels or behaviors that plain HTML, JavaScript and CSS can do. So there is no tooltip on hover, no legend, no axis title, no threshold coloring, and no data-point interaction in the core. The README's Plugins section says only "Coming soon", and the features it lists (axis labels, tooltips at data points, coloring above or below a threshold) are tucked inside a details block labeled "For v0.11" that links to the old gionkunz.github.io plugin page. Anyone migrating from v0.11 should treat that plugin set as legacy rather than as a v1 feature list.

That makes Chartist the wrong choice when a dashboard needs interactive tooltips and legends on day one. You would be writing the hover layer, the label formatting and the legend markup yourself, and at that point you are maintaining a charting layer rather than using one. It is also a poor fit when you need chart types beyond the ones the library ships; the README does not enumerate them, so check the v1 documentation at chartist.dev before assuming your chart exists.

The licensing is worth a look too. package.json declares "license": "MIT OR WTFPL" and the files array ships both LICENSE-WTFPL and LICENSE-MIT, so a consumer can pick either. The WTFPL is permissive in an unusual way, and some organizations have policies that flag it by name regardless of what it permits. That is a policy question, not a legal one, and it is the kind of thing to raise before a dependency review rather than after.

Chartist compared with Chart.js: same goal, opposite defaults

The comparison people actually search for is chartist vs chart js, and the two libraries differ in their starting assumptions rather than in their feature checklists. Chart.js renders to canvas. Chartist renders inline SVG in the DOM. Canvas gives you a single element and a drawing API; SVG gives you a node tree that CSS selectors and the browser's own layout can act on. Chartist's README explicitly names canvas as one of the wrong technologies for illustration, so the project is not neutral about this.

The second difference is where features live. Chart.js bundles tooltips, legends, animations and interactions into the library. Chartist pushes those concerns outward, on the argument that HTML, CSS and JavaScript already handle them, which is why the core is small and why the README can list no built-in event handling. The trade is real in both directions: with Chart.js you get behavior immediately and theme it through the library's options; with Chartist you get markup immediately and write the behavior yourself.

The third difference is responsiveness. Chartist's positioning is that responsive charts come from SVG plus layout, so there is no separate resize API to configure. With a canvas library you are typically configuring aspect ratio and resize behavior explicitly. Neither approach is wrong; they just put the work in different files.

Maintenance, releases and the cost of upgrading

The repository is not archived, and its last push was on 2026-09-19, two days before this article's reference point, so the codebase is being touched. The release history shows v1.3.1 in April 2025, v1.4.0 in June 2025 and v1.5.0 in September 2025, which is a steady cadence rather than a burst. The current package.json version is 1.5.0, matching the most recent release.

Upgrade cost is dominated by the v0.11 to v1 break rather than by the 1.x line. The README links a "What's new in v1?" page on chartist.dev and hides the old plugin documentation behind a "For v0.11" summary, which is a signal that the plugin ecosystem did not carry forward unchanged. If you are on v0.11, budget for replacing plugin-provided behavior with your own code. Within 1.x, the published package exposes both a CommonJS and an ES module build through the exports map, so a bundler upgrade is unlikely to force a source change, but the exports map is also the thing to check if your toolchain resolves the package differently than you expect.

On Node, package.json sets engines.node to ">=14". If your build environment is pinned below that, installation will warn or fail depending on your package manager's strictness.

Editorial conclusion

Adopt Chartist if you want inline SVG in the DOM, CSS-driven styling and a small drawing layer you can wrap in your own components. Do not adopt it if you need tooltips, legends, axis titles or animation out of the box, because the README says plugins are coming soon and the v0.11 plugin list is behind a legacy link. Before committing, check the v1 documentation for the chart types you need, confirm the package.json exports map matches your bundler, and read both LICENSE-MIT and LICENSE-WTFPL.

Frequently asked questions

Official sources

1. chartist-js/chartist on GitHub
2. License: MIT
3. Project website
4. README
5. Releases