axis-hover-plugin
v1.0.4
Published
Plugin to display tooltips on hover of the axis of chart.js charts.
Downloads
11
Maintainers
Readme
chartjs-axis-hover-plugin
Plugin that creates tooltips displaying tick name on hover of axis of charts, allowing the display of longer axis tick names.
Live example (to be added).
Install
npm i axis-hover-plugin
Usage
Import the plugin and register it as a normal chartjs plugin. Plugin requires two arguments:
isVertical
pass true unless you are rendering a horizontal bar chartfullLabels
A list of the full labels, ordered as the data is ordered. This allows you to truncate the labels inchart.options.x.ticks.callback
and still display the full labels in the tooltips generated by plugin.
All further options are passed through chart.options.plugins.axis_hover_plugin
Example config (using chartjs Object data type).
import { Chart } from 'chart.js';
import { axisHoverPlugin } from 'axis-hover-plugin';
const canvas = document.getElementById('chart');
const chart = new Chart(canvas, {
data: data,
type: 'bar',
options: {
plugins: {
axis_hover_plugin: {
font: `800 12px 'Nunito', sans-serif`
}
}
},
plugins: [
axisHoverPlugin(
true,
data.datasets[0].data.map(dp => dp.x)
)
],
})
Plugin options
The following options can be passed through chart.options.plugins.axis_hover_plugin
{
font: `800 12px 'Nunito', sans-serif`,
minTooltipWidth: 140,
maxTooltipWidth: 240,
caretSize: 10,
xScaleAdjustment: -8,
yScaleAdjustment: -10,
xTextAdjustment: 10,
yTextAdjustment: -15,
tooltipBackgroundColor: '#000',
fontColor: '#FFF',
boxPadding: 10,
tooltipBackgroundRadius: 3,
tooltipDistanceFromZeroHorizontal: -5,
tooltipDistanceFromZeroVertical: 5,
}