Skip to content

Commit 925fc71

Browse files
authored
Clarify how to import and use the helper functions with bundlers (chartjs#9319)
1 parent 860c130 commit 925fc71

File tree

1 file changed

+25
-0
lines changed

1 file changed

+25
-0
lines changed

Diff for: docs/getting-started/integration.md

+25
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,31 @@ And finally there is an separate path to do just the above for you, in one line:
9494
import Chart from 'chart.js/auto';
9595
```
9696

97+
### Helper functions
98+
99+
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.
100+
101+
Example of [Converting Events to Data Values](../configuration/interactions.md#converting-events-to-data-values) using bundlers.
102+
103+
```javascript
104+
import Chart from 'chart.js/auto';
105+
import { getRelativePosition } from 'chart.js/helpers';
106+
107+
const chart = new Chart(ctx, {
108+
type: 'line',
109+
data: data,
110+
options: {
111+
onClick: (e) => {
112+
const canvasPosition = getRelativePosition(e, chart);
113+
114+
// Substitute the appropriate scale IDs
115+
const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
116+
const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
117+
}
118+
}
119+
});
120+
```
121+
97122
## Require JS
98123

99124
**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.).

0 commit comments

Comments
 (0)