# Interaction Modes

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

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

setting.

## point

Finds all of the items that intersect the point.

```
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
mode: '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.

```
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
mode: 'nearest'
}
}
})
```

## single (deprecated)

Finds the first item that intersects the point and returns it. Behaves like 'nearest' mode with intersect = true.

## label (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 `intersect`

false the nearest item, in the x direction, is used to determine the index.

```
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
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.

```
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: {
tooltips: {
mode: 'index',
axis: 'y'
}
}
})
```

## x-axis (deprecated)

Behaves like `'index'`

mode with `intersect = false`

.

## 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.

```
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
mode: 'dataset'
}
}
})
```

## 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.

```
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
mode: 'x'
}
}
})
```

## 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.

```
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
mode: 'y'
}
}
})
```