設定

設定は、チャートの動作を変更するために使用します。スタイル、フォント、凡例などを制御するプロパティがあります。

グローバル設定

この考え方は、設定のDRY(訳注: Don't repeat yourself、コードの重複を防ごうとする考え方のこと)を維持するためにChart.js 1.0で導入されました。これにより、すべてのチャートタイプに対して包括的にオプションを変更することができます。各インスタンスにおいてオプションを指定したり、特定のチャートタイプの初期値を変更する必要がなくなります。(訳注: 設定には、グローバル設定 > 各チャートタイプごとの設定 > 各チャートインスタンスごとの設定の3種類があります。)

Chart.jsは、チャートタイプの初期値とスケールの初期値を適切に使用して、チャートに渡されたオプションオブジェクトとグローバル設定とを統合します。これにより、個々のチャート設定では必要なだけ指定することができますし、適用可能な場合はすべてのチャートタイプの初期値を変更することもできます。グローバルな一般オプションは Chart.defaults.globalで定義されています。各チャートタイプの初期値については、そのチャートタイプのドキュメントで説明しています。

次の例では、すべてのチャートに対してマウスオーバーモードを 'nearest'に設定します。ただし、チャートタイプの初期値あるいは、チャート作成時にコンストラクタに渡されるオプションによって、設定が上書きされなかった場合に限ります。

Chart.defaults.global.hover.mode = 'nearest';

// ここでは上書きされなかったため、マウスオーバーモードがnearestに設定されています
var chartHoverModeNearest  = new Chart(ctx, {
    type: 'line',
    data: data,
});

// このチャートでは、マウスオーバーモードが渡されています
var chartDifferentHoverMode = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        hover: {
            // グローバル設定を上書きする
            mode: 'index'
        }
    }
})