From: Jacco van den Berg <39033624+LeeLenaleee@users.noreply.github.com>
Date: Fri, 25 Jun 2021 22:34:41 +0000 (+0200)
Subject: Clarify how to import and use the helper functions with bundlers (#9319)
X-Git-Tag: v3.4.0~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=925fc71cc91bd21d192efd158d5a63a231665513;p=thirdparty%2FChart.js.git

Clarify how to import and use the helper functions with bundlers (#9319)
---

diff --git a/docs/getting-started/integration.md b/docs/getting-started/integration.md
index d6e30415f..e411745d2 100644
--- a/docs/getting-started/integration.md
+++ b/docs/getting-started/integration.md
@@ -94,6 +94,31 @@ And finally there is an separate path to do just the above for you, in one line:
 import Chart from 'chart.js/auto';
 ```
 
+### Helper functions
+
+If you want to use the helper functions, you will need to import these separately from the helpers package and use them as stand-alone functions.
+
+Example of [Converting Events to Data Values](../configuration/interactions.md#converting-events-to-data-values) using bundlers.
+
+```javascript
+import Chart from 'chart.js/auto';
+import { getRelativePosition } from 'chart.js/helpers';
+
+const chart = new Chart(ctx, {
+  type: 'line',
+  data: data,
+  options: {
+    onClick: (e) => {
+      const canvasPosition = getRelativePosition(e, chart);
+
+      // Substitute the appropriate scale IDs
+      const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
+      const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
+    }
+  }
+});
+```
+
 ## Require JS
 
 **Important:** RequireJS [can **not** load CommonJS module as is](https://requirejs.org/docs/commonjs.html#intro), so be sure to require one of the UMD builds instead (i.e. `dist/chart.js`, `dist/chart.min.js`, etc.).