Plugins

Small add-ons, big tricks

Tooltips, axis titles, legends, labels and zoom: 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 14, 2026

Axis title
Adds a title to the X and Y axes, with an offset and text anchor of your choice.
API v0.xGlobal: reads the global Chartist, for backwards compatibilityNo SSR
Line, Bar · 45,483 downloads a month
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 · 29,053 downloads a month
Tooltips
Shows a tooltip with a point's value and meta data on hover, for lines, bars and slices.
API v0.xGlobal: reads the global Chartist, for backwards compatibilityNo SSR
Line, Bar, Pie · 22,820 downloads a month
Point labels
Writes each value next to its point, so readers see exact numbers without hovering.
API v0.xGlobal: reads the global Chartist, for backwards compatibilityNo SSR
Line, Bar · 11,888 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,844 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 · 9,140 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 · 5,181 downloads a month
Bar labels
Writes each value at the end of its bar.
API v0.xGlobal: reads the global Chartist, for backwards compatibilityNo SSR
Bar · 2,585 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,988 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,441 downloads a month
Tooltips (maintained)
Shows a tooltip with the value and meta data on hover. A maintained version of the tooltips plugin, written for 1.x, with an ES module build.
API v1.xES moduleNo SSR
Line, Bar, Pie · 811 downloads a month
Target line
Draws a horizontal line at a target value.
API v0.xGlobal: reads the global Chartist, for backwards compatibilityNo SSR
Line, Bar · 748 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.

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)] });