Tooltips

API v0.xGlobalNo SSR

chartist-plugin-tooltips@0.0.17

Shows a tooltip with a point's value and meta data on hover, for lines, bars and slices.

The most used fork of the original tooltip plugin, without jQuery. Its repository is gone; the npm package remains. For a maintained alternative, see Stefan Kalscheuer's tooltips below.

Author: Markus Padourek
Source: Repository gone · npm
License: MIT
Downloads: 22,820 a month (October 14, 2026)
Last release: 2016
Charts: Line, Bar, Pie

See it run

Hover a point to see its tooltip.

src/main.ts

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

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

lineChart(
  '#chart',
  {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [
      [
        { meta: 'Snow', value: 2 },
        { meta: 'Thaw', value: 5 },
        { meta: 'Rain', value: 8 },
        { meta: 'Blossom', value: 13 },
        { meta: 'Sun', value: 18 },
        { meta: 'Heat', value: 24 }
      ]
    ]
  },
  { plugins: [fromLegacyPlugin(plugins.tooltip())] }
);

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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist-plugin-tooltips@0.0.17/dist/chartist-plugin-tooltip.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-tooltips@0.0.17/dist/chartist-plugin-tooltip.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.tooltip())]
  });
</script>