Chart.js plugin to draw vertical crosshair, zoom, interpolate values and sync chart interactions.

Requires Chart.js 3.9.0 or later.

Documentation

• Installation
• Options
• Samples

Example

1new Chart(ctx, {
2  // ... data ...
3  options: {
4    // ... other options ...
5    plugins: {
6      tooltip: {
7        mode: 'interpolate',
8        intersect: false
9      },
10      crosshair: {
11        line: {
12          color: '#F66',  // crosshair line color
13          width: 1        // crosshair line width
14        },
15        sync: {
16          enabled: true,            // enable trace line syncing with other charts
17          group: 1,                 // chart group
18          suppressTooltips: false   // suppress tooltips when showing a synced tracer
19        },
20        zoom: {
21          enabled: true,                                      // enable zooming
22          zoomboxBackgroundColor: 'rgba(66,133,244,0.2)',     // background color of zoom box 
23          zoomboxBorderColor: '#48F',                         // border color of zoom box
24          zoomButtonText: 'Reset Zoom',                       // reset zoom button text
25          zoomButtonClass: 'reset-zoom',                      // reset zoom button class
26        },
27        callbacks: {
28          beforeZoom: () => function(start, end) {                  // called before zoom, return false to prevent zoom
29            return true;
30          },
31          afterZoom: () => function(start, end) {                   // called after zoom
32          }
33        }
34      }
35    }
36  }
37});

Development

You first need to install node dependencies (requires Node.js):

> npm install

The following commands will then be available from the repository root:

> gulp build            // build dist files
> gulp build --watch    // build and watch for changes
> gulp lint             // perform code linting
> gulp docs             // generate GitBook documentation (`dist/docs`)
> gulp samples          // prepare samples for release (`dist/samples`)
> gulp package          // create an archive with dist files and samples
> gulp netlify          // prepare Netlify artifacts (`dist/www`)

License

chartjs-plugin-crosshair is available under the MIT license.