Interactions

By default, these options apply to both the hover and tooltip interactions. The same options can be set in the options.hover namespace, in which case they will only affect the hover interaction. Similarly, the options can be set in the options.plugins.tooltip namespace to independently configure the tooltip interactions.

The following properties define how the chart interacts with events. Namespace: options

For example, to have the chart only respond to click events, you could do:

Events for each plugin can be further limited by defining (allowed) events array in plugin options:

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    // All of these (default) events trigger a hover and are passed to all plugins,
    // unless limited at plugin options
    events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
    plugins: {
      tooltip: {
        // Tooltip will only receive click events
        events: ['click']
      }
    }
  }
});

Events that do not fire over chartArea, like mouseout, can be captured using a simple plugin:

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    // these are the default events:
    // events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
  },
    id: 'myEventCatcher',
    beforeEvent(chart, args, pluginOptions) {
      const event = args.event;
      if (event.type === 'mouseout') {
        // process the event
      }
    }
  }]
});

For more information about plugins, see

Converting Events to Data Values

const chart = new Chart(ctx, {
    data: data,
    options: {
        onClick: (e) => {
            const canvasPosition = Chart.helpers.getRelativePosition(e, chart);
            // Substitute the appropriate scale IDs
            const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
            const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
        }
    }
});

When using a bundler, the helper functions have to be imported seperatly, for a full explanation of this please head over to the page

When configuring the interaction with the graph via interaction, hover or tooltips, a number of different modes are available.

options.hover and options.plugins.tooltip extend from options.interaction. So if mode, intersect or any other common settings are configured only in options.interaction, both hover and tooltips obey that.

The modes are detailed below and how they behave in conjunction with the intersect setting.

See how different modes work with the tooltip in

Finds all of the items that intersect the point.

nearest

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'nearest'
        }
    }
});

Finds item at the same index. If the intersect setting is true, the first intersecting item is used to determine the index in the data. If intersect false the nearest item, in the x direction, is used to determine the index.

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'index'
        }
    }
});

To use index mode in a chart like the horizontal bar chart, where we search along the y direction, you can use the axis setting introduced in v2.7.0. By setting this value to 'y' on the y direction is used.

const chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        interaction: {
            axis: 'y'
        }
    }
});

dataset

Finds items in the same dataset. If the intersect setting is true, the first intersecting item is used to determine the index in the data. If intersect false the nearest item is used to determine the index.

Returns all items that would intersect based on the X coordinate of the position only. Would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts.

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
        }
    }
});

y

Returns all items that would intersect based on the Y coordinate of the position. This would be useful for a horizontal cursor implementation. Note that this only applies to cartesian charts.

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'y'
        }
    }
});

New modes can be defined by adding functions to the Chart.Interaction.modes map. You can use the Chart.Interaction.evaluateInteractionItems function to help implement these.

import { Interaction } from 'chart.js';
import { getRelativePosition } from 'chart.js/helpers';
/**
 * Custom interaction mode
 * @function Interaction.modes.myCustomMode
 * @param {Chart} chart - the chart we are returning items from
 * @param {Event} e - the event we are find things at
 * @param {InteractionOptions} options - options to use
 * @param {boolean} [useFinalPosition] - use final element position (animation target)
 * @return {InteractionItem[]} - items that are found
 */
Interaction.modes.myCustomMode = function(chart, e, options, useFinalPosition) {
  const position = getRelativePosition(e, chart);
  const items = [];
  Interaction.evaluateInteractionItems(chart, 'x', position, (element, datasetIndex, index) => {
    if (element.inXRange(position.x, useFinalPosition) && myCustomLogic(element)) {
      items.push({element, datasetIndex, index});
    }
  });
  return items;
};
// Then, to use it...
new Chart.js(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'myCustomMode'
        }

If you’re using TypeScript, you’ll also need to register the new mode: