{"./":{"url":"./","title":"Introduction","keywords":"","body":" Chart.js plugin to draw vertical crosshair, zoom, interpolate values and sync chart interactions. Requires Chart.js 2.6.0 or later. Documentation Installation Options Samples Example new Chart(ctx, { // ... data ... options: { // ... other options ... tooltips: { mode: 'interpolate', intersect: false }, plugins: { crosshair: { line: { color: '#F66', // crosshair line color width: 1, // crosshair line width dashPattern: [5, 5] // crosshair line dash pattern }, 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. "},"installation.html":{"url":"installation.html","title":"Installation","keywords":"","body":"Installation npm npm install chartjs-plugin-crosshair --save CDN By default, https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair returns the latest (minified) version, however it's highly recommended 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.1.2 // exact version https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair@1 // latest 1.x.x Read more about jsDeliver versioning on their website. Download You can download the latest version of chartjs-plugin-crosshair from the GitHub releases: chartjs-plugin-crosshair.js (recommended for development) chartjs-plugin-crosshair.min.js (recommended for production) "},"options.html":{"url":"options.html","title":"Options","keywords":"","body":"Options The plugin options can be changed at 2 different levels and with the following priority: per chart: options.plugins.crosshair.* globally: Chart.defaults.global.plugins.crosshair.* Interpolate tooltip mode This plugin exposes the interpolation tooltip mode, which allows for linear interpolation of values between data points. The interpolation mode can be enabled by setting the tooltips mode to interpolate options: { ... tooltips: { mode: 'interpolate', intersect: false } } Crosshair Options Crosshair line options Name Type Default color String #F66 width Number 1 dashPattern Number[] [] color The color of the crosshair line, defaults to red (#F666) width The width of the crosshair line in pixels dashPattern Dash pattern of the crosshair line, specified as an array of values indicating alternating lengths of lines and gaps (More info) Chart interaction syncing The plugin allows for syncing crosshairs over multiple charts Name Type Default enabled Boolean true group Number 1 suppressTooltips Boolean false enabled Enable or disable syncing of crosshairs between charts of the same group group Limit crosshair syncing to charts belonging to the same 'group' suppressTooltips Allows for suppressing tooltips when showing a synced crosshair Zooming The plugin allows for horizontal zooming by clicking and dragging over the chart. Name Type Default enabled Boolean true zoomboxBackgroundColor String rgba(66,133,244,0.2) zoomboxBorderColor String #48F zoomButtonText String Reset Zoom zoomButtonClass String reset-zoom enabled Enable or disable zooming by drag and drop zoomboxBackgroundColor Background color of the zoombox zoomboxBorderColor Border color of the zoombox zoomButtonText Text of the button to reset the chart to original axis ranges. zoomButtonClass Class of the button to reset the chart to original axis ranges. Snapping The plugin allows snapping to datapoints when used with line charts This option requires the hover.intersect configuration option of your chart to be set to false. Name Type Default enabled Boolean false enabled Enable or disable snapping to point for line charts Callbacks The plugin exposes to callbacks to handle zooming beforeZoom(start,end) Called before zooming, return false to prevent the zoom afterZoom(start,end) Called after zooming, can for example be used for reloading data at a higher resolution "}}