Integration

Chart.jsはプレーンなJavaScriptや、様々なモジュールローダー使用することができます。 以下はモジュールローダを使ってChart.jsをロードする方法です。

scriptタグ

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

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

注意：Moment.jsはChart.js依存でインストールされます。 Moment.jsを利用したくない場合(別の日付システムを利用したり、時間軸が不要等)、 Bundlerにこの依存関係を除外するように設定する必要があります。 (例えばWebpackのexternalsやRollupのexternal等)

// Webpack
{
    externals: {
        moment: 'moment'
    }
}

// Rollup
{
    external: {
        ['moment']
    }
}

RequireJS

重要：RequireJSはCommonJSモジュールをそのままロードすることはできません。 そのため、代わりにUMDでビルドされたファイルを使用してください。 (例えばdist/Chart.js、dist/Chart.min.js等)

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

注意：v2.8以降、Moment.jsはChart.js、Chart.min.jsのオプション依存です。 Moment.jsで時間軸を利用するには、Chart.jsで利用する前にMoment.jsが完全にロードされていることを確認する必要があります。 shimを使うか、

require.config({
    shim: {
        'chartjs': {
          deps: ['moment']    // chartjsの前にmomentのロードを強制する
        }
    },
    paths: {
        'chartjs': 'path/to/chartjs/dist/Chart.min.js',
        'moment': 'path/to/moment'
    }
});

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

単に2重にネストしたreqquire()を使います。

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

Content Security Policy

デフォルトでは、Chart.jsはCSSをDOMに直接挿入します。コンテンツセキュリティポリシー(CSP)で保護されたウェブページではstyle-src 'unsafe-inline'を追加する必要があります。 style-src 'self'のみが許可された厳しいCSP環境では手動で以下のCSSファイルを追加する必要があります。

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

そして、最初のチャートを生成する前にCSS Injectionを無効化します。

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