Chart.js plugin to draw vertical crosshair, zoom, interpolate values and sync chart interactions.
Requires Chart.js 3.4.0 or later.
Documentation
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.
10 Jul 16, 2022
11 Nov 25, 2022
21 Nov 6, 2022
1.2k Jan 4, 2023
222 Sep 8, 2022
42 Oct 25, 2022
510 Jan 2, 2023
57 Oct 27, 2022
106 Jan 3, 2023
14 Dec 18, 2022
196 Dec 18, 2022
77 Dec 6, 2022
3 Aug 9, 2022