Target line

API v0.xGlobalNo SSR

chartist-plugin-targetline@1.0.1

Draws a horizontal line at a target value.

It places the line by the axis maximum, so the axis should start at zero.

Author: Harry Twyford
Source: GitHub · npm
License: ISC
Downloads: 748 a month (October 14, 2026)
Last release: 2017
Charts: Line, Bar

See it run

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: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [[620, 780, 940, 1050, 990, 1210]]
  },
  {
    // The plugin places the line by the axis maximum, so start at zero.
    low: 0,
    plugins: [fromLegacyPlugin(plugins.ctTargetLine({ value: 1000 }))]
  }
);

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-targetline@1.0.1/chartist-plugin-targetline.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.ctTargetLine())]
  });
</script>