Hover

API v0.xGlobalNo SSR

chartist-hover@1.0.5

Calls your functions when the pointer enters or leaves a point, so you can show the value anywhere you like.

Author: Pier-Luc Gendreau
Source: GitHub · npm
License: MIT
Downloads: 9,844 a month (October 14, 2026)
Last release: 2018
Charts: Line, Bar, Pie

See it run

Hover a point; the caption shows its value.

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;
const caption = document.querySelector('#caption')!;

lineChart(
  '#chart',
  {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [[1, 5, 3, 4, 6, 2, 3]]
  },
  {
    height: 220,
    plugins: [
      fromLegacyPlugin(
        plugins.hover({
          // The plugin passes the event, with the hovered point as target.
          onMouseEnter: (event: { target: Element }) => {
            caption.textContent = `Value: ${event.target.getAttribute('ct:value')}`;
          },
          onMouseLeave: () => {
            caption.textContent = 'Hover the chart.';
          }
        })
      )
    ]
  }
);

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-hover@1.0.5/chartist-hover.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.hover())]
  });
</script>