Chart.js/docs/getting-started/integration.md
Jukka Kurkela df3c73cc5e
Give the boot to chartjs-adapter-moment (#7155)
Remove default of using chartjs-adapter-moment
2020-02-27 19:40:31 -05:00

1.3 KiB

Integration

Chart.js can be integrated with plain JavaScript or with different module loaders. The examples below show how to load Chart.js in different systems.

Script Tag

<script src="path/to/chartjs/dist/Chart.js"></script>
<script>
    var myChart = new Chart(ctx, {...});
</script>

Common JS

var Chart = require('chart.js');
var myChart = new Chart(ctx, {...});

Bundlers (Webpack, Rollup, etc.)

import Chart from 'chart.js';
var myChart = new Chart(ctx, {...});

Require JS

Important: RequireJS can not load CommonJS module as is, so be sure to require one of the UMD builds instead (i.e. dist/Chart.js, dist/Chart.min.js, etc.).

require(['path/to/chartjs/dist/Chart.min.js'], function(Chart){
    var myChart = new Chart(ctx, {...});
});

Note: in order to use the time scale, you need to make sure one of the available date adapters and corresponding date library are fully loaded after requiring Chart.js. For this you can use nested requires:

require(['chartjs'], function(Chart) {
    require(['moment'], function() {
        require(['chartjs-adapter-moment'], function() {
            new Chart(ctx, {...});
        });
    });
});