From: Evert Timberg <evert.timberg+github@gmail.com>
Date: Mon, 19 Oct 2020 05:07:03 +0000 (-0400)
Subject: Add example of event to data values (#7925)
X-Git-Tag: v3.0.0-beta.5~27
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=41eb16a6506ce1caa699ee5ca6e1d85f01c27b63;p=thirdparty%2FChart.js.git

Add example of event to data values (#7925)
---

diff --git a/docs/docs/general/interactions/events.md b/docs/docs/general/interactions/events.md
index b7a6cb167..499826792 100644
--- a/docs/docs/general/interactions/events.md
+++ b/docs/docs/general/interactions/events.md
@@ -22,3 +22,23 @@ var chart = new Chart(ctx, {
     }
 });
 ```
+
+## Converting Events to Data Values
+
+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.
+
+```javascript
+const chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        onClick: (e) => {
+            const canvasPosition = Chart.helpers.getRelativePosition(e);
+
+            // Substitute the appropriate scale IDs
+            const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
+            const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
+        }
+    }
+});
+```
\ No newline at end of file