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 d6e30415f49f0f25584bfec4af41eb99be3e8a50..e411745d22a50d990685ce09a2308e8a7f21da9e 100644 (file)
--- 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.).