axis-hover-plugin

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:

1. isVertical pass true unless you are rendering a horizontal bar chart
2. fullLabels A list of the full labels, ordered as the data is ordered. This allows you to truncate the labels in chart.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,
    }