Skip to content

Commit

Permalink
Clarify how to import and use the helper functions with bundlers (#9319)
Browse files Browse the repository at this point in the history
  • Loading branch information
LeeLenaleee committed Jun 25, 2021
1 parent 860c130 commit 925fc71
Showing 1 changed file with 25 additions and 0 deletions.
25 changes: 25 additions & 0 deletions docs/getting-started/integration.md
Expand Up @@ -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.).
Expand Down

0 comments on commit 925fc71

Please sign in to comment.