Forked from @adelamarAtGalileo/chartjs-plugin-crosshair, who fixed chart syncing.

This forked version also includes a fix allowing syncing across charts of variable height.
The fix can be utilized by adding the following to your plugins config:

plugins: {
  crosshair: {
    sync: {
      axis: 'x', // Sync tooltips across charts of variable heights. Possible options: 'x' | 'xy'. Default: 'xy'
    }
  }
}

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

Requires Chart.js 3.4.0 or later.

Documentation

• Installation
• Options
• Samples

Example

new Chart(ctx, {
  // ... data ...
  options: {
    // ... other options ...
    plugins: {
      tooltip: {
        mode: "interpolate",
        intersect: false,
      },
      crosshair: {
        line: {
          color: "#F66", // crosshair line color
          width: 1, // crosshair line width
        },
        sync: {
          enabled: true, // enable trace line syncing with other charts
          group: 1, // chart group
          suppressTooltips: false, // suppress tooltips when showing a synced tracer
        },
        zoom: {
          enabled: true, // enable zooming
          zoomboxBackgroundColor: "rgba(66,133,244,0.2)", // background color of zoom box
          zoomboxBorderColor: "#48F", // border color of zoom box
          zoomButtonText: "Reset Zoom", // reset zoom button text
          zoomButtonClass: "reset-zoom", // reset zoom button class
        },
        callbacks: {
          beforeZoom: () =>
            function (start, end) {
              // called before zoom, return false to prevent zoom
              return true;
            },
          afterZoom: () =>
            function (start, end) {
              // called after zoom
            },
        },
      },
    },
  },
});

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.