Interaction Modes

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

    Finds all of the items that intersect the point.

    nearest

    Gets the item that is nearest to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). If 2 or more items are at the same distance, the one with the smallest area is used. If intersect is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.

    1. var chart = new Chart(ctx, {
    2.     type: 'line',
    3.     options: {
    4.         tooltips: {
    5.             mode: 'nearest'
    6.         }
    7.     }
    8. })

    single (deprecated)

    See 'index' mode

    index

    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 false the nearest item, in the x direction, is used to determine the 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.

    1. var chart = new Chart(ctx, {
    2.     type: 'horizontalBar',
    3.     data: data,
    4.     options: {
    5.         tooltips: {
    6.             axis: 'y'
    7.         }
    8.     }
    9. })

    x-axis (deprecated)

    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.

    x

    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

    1. var chart = new Chart(ctx, {
    2.     type: 'line',
    3.     data: data,
    4.     options: {
    5.         tooltips: {
    6.             mode: 'x'
    7.         }

    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.