diff --git a/docs/getting-started/integration.md b/docs/getting-started/integration.md index 85671ed3a36..31c18c40fba 100644 --- a/docs/getting-started/integration.md +++ b/docs/getting-started/integration.md @@ -11,6 +11,13 @@ Chart.js can be integrated with plain JavaScript or with different module loader ``` +## Common JS + +```javascript +var Chart = require('chart.js'); +var myChart = new Chart(ctx, {...}); +``` + ## Bundlers (Webpack, Rollup, etc.) ```javascript @@ -38,19 +45,42 @@ var myChart = new Chart(ctx, {...}); } ``` -## Common JS +## Require JS + +**Important:** RequireJS [can **not** load CommonJS module as is](http://www.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.). ```javascript -var Chart = require('chart.js'); -var myChart = new Chart(ctx, {...}); +require(['path/to/chartjs/dist/Chart.min.js'], function(Chart){ + var myChart = new Chart(ctx, {...}); +}); ``` -## Require JS +**Note:** starting v2.8, Moment.js is now an optional dependency for `Chart.js` and `Chart.min.js`. That means you need to make sure Moment.js is fully loaded **before** requiring Chart.js. You can either use a shim: ```javascript -require(['path/to/chartjs/dist/Chart.js'], function(Chart){ - var myChart = new Chart(ctx, {...}); +require.config({ + shim: { + 'chartjs': { + deps: ['moment'] // enforce moment to be loaded before chartjs + } + }, + paths: { + 'chartjs': 'path/to/chartjs/dist/Chart.min.js', + 'moment': 'path/to/moment' + } +}); + +require(['chartjs'], function(Chart) { + new Chart(ctx, {...}); }); ``` -**Important:** RequireJS [can **not** load CommonJS module as is](http://www.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.). +or simply use two nested `require()`: + +```javascript +require(['moment'], function() { + require(['chartjs'], function(Chart) { + new Chart(ctx, {...}); + }); +}); +```