# Installation

# npm

npm (opens new window) npm downloads (opens new window)

npm install chartjs-plugin-crosshair --save

# CDN

jsdelivr (opens new window) jsdelivr hits (opens new window)

By default, https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair returns the latest (minified) version, however it's highly recommended (opens new window) to always specify a version in order to avoid breaking changes. This can be achieved by appending @{version} to the url:

https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair@1.2.0    // exact version
https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair@1        // latest 1.x.x

Read more about jsDeliver versioning on their website (opens new window).

# Download

github (opens new window) github downloads (opens new window)

You can download the latest version of chartjs-plugin-crosshair from the GitHub releases (opens new window):

  • chartjs-plugin-crosshair.js (recommended for development)
  • chartjs-plugin-crosshair.min.js (recommended for production)

# Integration

chartjs-plugin-crosshair can be integrated with plain JavaScript or with different module loaders. The examples below show how to load the plugin in different systems.

# Script Tag

<script src="path/to/chartjs/dist/chart.min.js"></script>
<script src="path/to/chartjs-plugin-crosshair/dist/chartjs-plugin-crosshair.min.js"></script>
<script>
    var myChart = new Chart(ctx, {...});
</script>

# Bundlers (Webpack, Rollup, etc.)

import { Chart, Interaction } from 'chart.js';
import {CrosshairPlugin,Interpolate} from 'chartjs-plugin-crosshair';

Chart.register(CrosshairPlugin);
Interaction.modes.interpolate = Interpolate