This is a fork of chartjs-plugin-crosshair which supports displaying interpolated values for line charts
Chart.js plugin to draw vertical crosshair, zoom, interpolate values and sync chart interactions.
Requires Chart.js 4.4.0 or later.
Documentation
Example
new Chart(ctx, {
// ... data ...
options: {
// ... other options ...
plugins: {
tooltip: {
mode: 'interpolate',
intersect: false,
callbacks: {
title: ([i]) => {
let x = i?.element?.x
x = x || x === 0 ? x.toFixed(2) : ""
return x
},
label: i => {
let label = i?.dataset?.label || ""
if (label) label = `${label}: `
let val = i?.element?.y
val = val || val === 0 ? val.toFixed(2) : ""
return `${label}${val}`
},
},
},
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.