色

Chartオプションに色を指定するときは、いくつかの形式を使用できます。色は、16進数、RGB、またはHSL表記の文字列として指定できます。色が必要でも指定されていない場合、Chart.jsはグローバルなデフォルト色を使用します。この色は Chart.defaults.global.defaultColorに保存されています。初期値は'rgba(0, 0, 0, 0.1)'に設定されています。

CanvasGradientオブジェクトを渡すこともできます。グラフに渡す前にこれを作成する必要がありますが、これを使用すると面白い効果が得られます。

模様とグラデーション

別の選択肢は、CanvasPatternまたはCanvasGradientオブジェクトを、文字列による色指定の代わりに渡すことです。

たとえば、画像を柄としてデータセットを塗りたい場合は、次のようにします。

var img = new Image();
img.src = 'https://example.com/my_image.png';
img.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var fillPattern = ctx.createPattern(img, 'repeat');

    var chart = new Chart(ctx, {
        data: {
            labels: ['Item 1', 'Item 2', 'Item 3'],
            datasets: [{
                data: [10, 20, 30],
                backgroundColor: fillPattern
            }]
        }
    })
}

データグラフィックスを模様で塗りつぶすと、視覚障害（例：色盲または部分視力）の閲覧者が、データをより簡単に理解するのに役立ちます。

Patternomalyライブラリを使用すると、データセットを塗るための模様を生成することができます。

var chartData = {
    datasets: [{
        data: [45, 25, 20, 10],
        backgroundColor: [
            pattern.draw('square', '#ff6384'),
            pattern.draw('circle', '#36a2eb'),
            pattern.draw('diamond', '#cc65fe'),
            pattern.draw('triangle', '#ffce56'),
        ]
    }],
    labels: ['Red', 'Blue', 'Purple', 'Yellow']
};