From 41eb16a6506ce1caa699ee5ca6e1d85f01c27b63 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Mon, 19 Oct 2020 01:07:03 -0400 Subject: [PATCH] Add example of event to data values (#7925) --- docs/docs/general/interactions/events.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) 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 -- 2.47.2