Plugins

Small add-ons, big tricks

Legends, zoom and thresholds: the community's most used plugins, each running live on v2. They hook into the events Chartist emits while drawing. How plugins work

Sorted by npm downloads in the last month · October 19, 2026

Legend
Adds a legend from the series names. Click an entry to hide or show its series.
API v0.xGlobal: reads the global Chartist, for backwards compatibilityNo SSR
Line, Bar, Pie · 27,780 downloads a month
Hover
Calls your functions when the pointer enters or leaves a point, so you can show the value anywhere you like.
API v0.xGlobal: reads the global Chartist, for backwards compatibilityNo SSR
Line, Bar, Pie · 9,597 downloads a month
Zoom
Drag a box over a line chart to zoom into it, and reset the zoom from your own button.
API v0.xGlobal: reads the global Chartist, for backwards compatibilityNo SSR
Line · 8,423 downloads a month
Fill donut
Draws a copy of the donut behind it, so an animated donut looks filled from the start, and puts HTML labels in or around it. Together they make gauges.
API v0.xGlobal: reads the global Chartist, for backwards compatibilityNo SSR
Pie · 4,854 downloads a month
Accessibility
Adds a visually hidden table with the data, a caption and a summary, so screen reader users get the numbers.
API v0.xGlobal: reads the global Chartist, for backwards compatibilityNo SSR
Line, Bar, Pie · 1,946 downloads a month
Threshold
Splits lines and bars at a value and gives the parts above and below their own classes to style.
API v0.xGlobal: reads the global Chartist, for backwards compatibilityNo SSR
Line, Bar · 1,379 downloads a month

Write your own

A v2 plugin is an object with a name and an install function that listens to the chart's events. A dozen lines go a long way.

The plugins above were written for 1.x and run through fromLegacyPlugin. A chart that uses one draws a new SVG on every render, even with liveDomRenderer(). For a chart that updates live, write a v2 plugin: Plugins for live updates.

Published one? Open a pull request that adds it to this page. Plugins with a few hundred downloads a month that need nothing but Chartist are welcome.

Plugin guide Add a plugin

import { barChart, type ChartPlugin } from 'chartist';

/** Bars at or above the limit get the class ct-over. */
const threshold = (limit: number): ChartPlugin => ({
  name: 'threshold',
  install(chart) {
    chart.on('compose', current => {
      if (current.role !== 'bar') {
        return;
      }
      // A number, { x, y } (with an X scale axis) or a hole.
      const { value } = current.ctx;
      const y =
        typeof value === 'number'
          ? value
          : value && 'y' in value
            ? value.y
            : undefined;
      return y !== undefined && y >= limit
        ? current.addClass('ct-over')
        : undefined;
    });
  }
});

barChart('#chart', data, { plugins: [threshold(5)] });