Legend

API v0.xGlobalNo SSR

chartist-plugin-legend@0.6.2

Adds a legend from the series names. Click an entry to hide or show its series.

It ships no stylesheet; its README has the CSS, as in the example.

Author: Kees Kluskens
Source: GitHub · npm
License: ISC
Downloads: 29,053 a month (October 14, 2026)
Last release: 2017
Charts: Line, Bar, Pie

See it run

Click a legend entry to hide its series.

src/main.ts

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

// Plugin scripts register on the global `Chartist`.
const { plugins } = Chartist;

lineChart(
  '#chart',
  {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [
      { name: 'Tea', data: [5, 6, 4, 7, 6] },
      { name: 'Coffee', data: [8, 9, 7, 9, 10] },
      { name: 'Cocoa', data: [2, 1, 3, 2, 4] }
    ]
  },
  {
    plugins: [
      fromLegacyPlugin(
        // An element of its own, so the legend doesn't overlap the chart.
        plugins.legend({ position: document.querySelector('#legend') })
      )
    ]
  }
);

Live

Use it on your site

Runs on v2 with chartist/compat. A script: load it after importing chartist/compat, which sets up the global it reads. With the UMD build or a bundler

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/index.min.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/compat.min.js';
</script>
<script defer src="https://cdn.jsdelivr.net/npm/chartist-plugin-legend@0.6.2/chartist-plugin-legend.js"></script>
<script type="module">
  import { lineChart } from 'https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/index.min.js';
  import { fromLegacyPlugin } from 'https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/compat.min.js';

  lineChart('#chart', data, {
    plugins: [fromLegacyPlugin(Chartist.plugins.legend())]
  });
</script>