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

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

Common JS

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

Bundlers (Webpack, Rollup, etc.)

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

Note: Moment.js is installed along Chart.js as dependency. If you don't want to use Moment.js (either because you use a different date adapter or simply because don't need time functionalities), you will have to configure your bundler to exclude this dependency (e.g. using externals for Webpack or external for Rollup).

  1. // Webpack
  2. {
  3.     externals: {
  4.         moment: 'moment'
  5.     }
  6. }
  1. // Rollup
  2. {
  3.     external: {
  4.         ['moment']
  5.     }
  6. }

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

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

Note: starting v2.8, Moment.js is an optional dependency for Chart.js and Chart.min.js. In order to use the time scale with Moment.js, you need to make sure Moment.js is fully loaded before requiring Chart.js. You can either use a shim:

  1. require.config({
  2.     shim: {
  3.         'chartjs': {
  4.             deps: ['moment']    // enforce moment to be loaded before chartjs
  5.         }
  6.     },
  7.     paths: {
  8.         'chartjs': 'path/to/chartjs/dist/Chart.min.js',
  9.         'moment': 'path/to/moment'
  10.     }
  11. });
  13. require(['chartjs'], function(Chart) {
  14.     new Chart(ctx, {...});
  15. });

or simply use two nested require():

  1. require(['moment'], function() {
  2.     require(['chartjs'], function(Chart) {
  3.         new Chart(ctx, {...});
  4.     });
  5. });

Content Security Policy

By default, Chart.js injects CSS directly into the DOM. For webpages secured using Content Security Policy (CSP), this requires to allow style-src 'unsafe-inline'. For stricter CSP environments, where only style-src 'self' is allowed, the following CSS file needs to be manually added to your webpage:

  1. <link rel="stylesheet" type="text/css" href="path/to/chartjs/dist/Chart.min.css">

And the style injection must be turned off before creating the first chart:

  1. // Disable automatic style injection
  2. Chart.platform.disableCSSInjection = true;