Initial commit

Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>

library/modules/chartjs/guides/interactions.md

@@ -0,0 +1,62 @@
+---
+title: Chart.js Interactions
+hide_title: true
+---
+
+# Interactions
+
+This guide is based on the documentation from Chart.js, which can be found [here](https://www.chartjs.org/docs/latest/configuration/interactions.html).
+
+## 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.
+
+<div className="ndl-image-with-background l">
+
+![](/library/modules/chartjs/guides/interactions-click.png)
+
+</div>
+
+In this screenshot, we connect the "Click", "Data" and "Helpers" outputs to a function node to be able to process the chart data.
+
+With this code in the Function node, we can start by getting the values on the X and Y axis.
+
+```js
+const data = Inputs.data;
+const helpers = Inputs.helpers;
+
+const canvasPosition = helpers.getRelativePosition(data, data.chart);
+
+// Substitute the appropriate scale IDs
+const dataX = data.chart.scales.x.getValueForPixel(canvasPosition.x);
+const dataY = data.chart.scales.y.getValueForPixel(canvasPosition.y);
+```
+
+Now with `dataX` and `dataY` we know what values the user clicked on.
+
+To continue from here, you can follow [Chart.js guides](https://www.chartjs.org/docs/latest/configuration/interactions.html).
+
+There are for examples [getPixelForValue](https://www.chartjs.org/docs/latest/api/classes/Scale.html#getpixelforvalue), that returns the location of the given data point.
+
+### Before Event
+
+Make all the connections under the "Before Event" category and helpers from the "Click Event" category,
+and this function will be triggered on any of the before events. 
+
+```js
+const chart = Inputs.chart;
+const args = Inputs.args;
+const helpers = Inputs.helpers;
+
+const canvasPosition = helpers.getRelativePosition(args.event, chart);
+
+// Substitute the appropriate scale IDs
+const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
+const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
+
+console.log({
+  canvasPosition,
+  dataX,
+  dataY,
+});
+```