# 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: {
...
plugins: {
tooltip: {
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 (opens new window))
# 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 tofalse
.
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