| commit | author | age | ||
| 83c3f6 | 1 | # Interaction Modes |
| SP | 2 | |
| 3 | When configuring interaction with the graph via hover or tooltips, a number of different modes are available. | |
| 4 | ||
| 5 | The modes are detailed below and how they behave in conjunction with the `intersect` setting. | |
| 6 | ||
| 7 | ## point | |
| 8 | Finds all of the items that intersect the point. | |
| 9 | ||
| 10 | ```javascript | |
| 11 | var chart = new Chart(ctx, { | |
| 12 | type: 'line', | |
| 13 | data: data, | |
| 14 | options: { | |
| 15 | tooltips: { | |
| 16 | mode: 'point' | |
| 17 | } | |
| 18 | } | |
| 19 | }) | |
| 20 | ``` | |
| 21 | ||
| 22 | ## nearest | |
| 23 | 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. | |
| 24 | ||
| 25 | ```javascript | |
| 26 | var chart = new Chart(ctx, { | |
| 27 | type: 'line', | |
| 28 | data: data, | |
| 29 | options: { | |
| 30 | tooltips: { | |
| 31 | mode: 'nearest' | |
| 32 | } | |
| 33 | } | |
| 34 | }) | |
| 35 | ``` | |
| 36 | ||
| 37 | ## single (deprecated) | |
| 38 | Finds the first item that intersects the point and returns it. Behaves like 'nearest' mode with intersect = true. | |
| 39 | ||
| 40 | ## label (deprecated) | |
| 41 | See `'index'` mode | |
| 42 | ||
| 43 | ## index | |
| 44 | 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. | |
| 45 | ||
| 46 | ```javascript | |
| 47 | var chart = new Chart(ctx, { | |
| 48 | type: 'line', | |
| 49 | data: data, | |
| 50 | options: { | |
| 51 | tooltips: { | |
| 52 | mode: 'index' | |
| 53 | } | |
| 54 | } | |
| 55 | }) | |
| 56 | ``` | |
| 57 | ||
| 58 | 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. | |
| 59 | ||
| 60 | ```javascript | |
| 61 | var chart = new Chart(ctx, { | |
| 62 | type: 'horizontalBar', | |
| 63 | data: data, | |
| 64 | options: { | |
| 65 | tooltips: { | |
| 66 | mode: 'index', | |
| 67 | axis: 'y' | |
| 68 | } | |
| 69 | } | |
| 70 | }) | |
| 71 | ``` | |
| 72 | ||
| 73 | ## x-axis (deprecated) | |
| 74 | Behaves like `'index'` mode with `intersect = false`. | |
| 75 | ||
| 76 | ## dataset | |
| 77 | 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. | |
| 78 | ||
| 79 | ```javascript | |
| 80 | var chart = new Chart(ctx, { | |
| 81 | type: 'line', | |
| 82 | data: data, | |
| 83 | options: { | |
| 84 | tooltips: { | |
| 85 | mode: 'dataset' | |
| 86 | } | |
| 87 | } | |
| 88 | }) | |
| 89 | ``` | |
| 90 | ||
| 91 | ## x | |
| 92 | 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 | |
| 93 | ||
| 94 | ```javascript | |
| 95 | var chart = new Chart(ctx, { | |
| 96 | type: 'line', | |
| 97 | data: data, | |
| 98 | options: { | |
| 99 | tooltips: { | |
| 100 | mode: 'x' | |
| 101 | } | |
| 102 | } | |
| 103 | }) | |
| 104 | ``` | |
| 105 | ||
| 106 | ## y | |
| 107 | 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. | |
| 108 | ||
| 109 | ```javascript | |
| 110 | var chart = new Chart(ctx, { | |
| 111 | type: 'line', | |
| 112 | data: data, | |
| 113 | options: { | |
| 114 | tooltips: { | |
| 115 | mode: 'y' | |
| 116 | } | |
| 117 | } | |
| 118 | }) | |
| 119 | ``` | |
