Skip to content

Commit ed73dce

Browse files
authored
Docs: describe catching events with plugin (#9296)
1 parent c6976e8 commit ed73dce

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

docs/configuration/interactions.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,30 @@ var chart = new Chart(ctx, {
5656
});
5757
```
5858

59+
Events that do not fire over chartArea, like `mouseout`, can be captured using a simple plugin:
60+
61+
```javascript
62+
var chart = new Chart(ctx, {
63+
type: 'line',
64+
data: data,
65+
options: {
66+
// these are the default events:
67+
// events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
68+
},
69+
plugins: [{
70+
id: 'myEventCatcher',
71+
beforeEvent(chart, args, pluginOptions) {
72+
const event = args.event;
73+
if (event.type === 'mouseout') {
74+
// process the event
75+
}
76+
}
77+
}]
78+
});
79+
```
80+
81+
For more information about plugins, see [Plugins](../developers/plugins.md)
82+
5983
### Converting Events to Data Values
6084

6185
A common occurrence is taking an event, such as a click, and finding the data coordinates on the chart where the event occurred. Chart.js provides helpers that make this a straightforward process.

0 commit comments

Comments
 (0)