From 925fc71cc91bd21d192efd158d5a63a231665513 Mon Sep 17 00:00:00 2001
From: Jacco van den Berg <39033624+LeeLenaleee@users.noreply.github.com>
Date: Sat, 26 Jun 2021 00:34:41 +0200
Subject: [PATCH] Clarify how to import and use the helper functions with
 bundlers (#9319)

---
 docs/getting-started/integration.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

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.).
-- 
2.47.2