Tooltips (maintained)

API v1.xES moduleNo SSR

@stklcode/chartist-plugin-tooltips@2.0.1

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.

Author: Stefan Kalscheuer
Source: GitHub · npm
License: MIT
Downloads: 811 a month (October 14, 2026)
Last release: 2026
Charts: Line, Bar, Pie

See it run

Hover a point to see its tooltip.

src/main.ts

import 'chartist/styles.css';
import { barChart } from 'chartist';
import { fromLegacyPlugin } from 'chartist/compat';
import ChartistPluginTooltip from '@stklcode/chartist-plugin-tooltips';

barChart(
  '#chart',
  {
    labels: ['North', 'East', 'South', 'West'],
    series: [
      [
        { meta: 'North', value: 320 },
        { meta: 'East', value: 450 },
        { meta: 'South', value: 280 },
        { meta: 'West', value: 390 }
      ]
    ]
  },
  {
    plugins: [
      fromLegacyPlugin(ChartistPluginTooltip, {
        transformTooltipTextFnc: (value: string) => `${value} visitors`
      })
    ]
  }
);

Live

Use it on your site

Runs on v2 with chartist/compat. An ES module: install it from npm and import it. With the UMD build or a bundler

// npm install chartist@next @stklcode/chartist-plugin-tooltips
import { lineChart } from 'chartist';
import { fromLegacyPlugin } from 'chartist/compat';
import plugin from '@stklcode/chartist-plugin-tooltips';
import 'chartist/styles.css';
import '@stklcode/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.css';

lineChart('#chart', data, { plugins: [fromLegacyPlugin(plugin, {})] });