Colors

色の指定は、いくつかのフォーマット(HEX、RGB、HSL)を指定することができます。 色が指定されていない場合は、グローバルオプションのデフォルトカラーを使用します。 この色は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
            }]
        }
    })
}

パターンを使ってデータを塗りつぶすことで、 視覚障害のあるユーザーでも、簡単にチャートを理解することができます。
参照：8% Better — Data Graphics and Colour Vision

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']
};

デモ1

パターン画像を使ってチャートを塗りつぶしています。

JavaScript

var img = new Image();
img.src = '../img/01.png';
img.onload = function() {
    var ctx = document.getElementById('myChart').getContext('2d');
    var fillPattern = ctx.createPattern(img, 'repeat');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Item 1', 'Item 2', 'Item 3'],
            datasets: [{
                data: [10, 20, 30],
                backgroundColor: fillPattern
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    })
}

HTML

<canvas id="myChart"></canvas>

デモ2

Patternomalyを使って、パターンで塗りつぶしています。

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
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']
};
new Chart(ctx, {
    type: 'bar',
    data: chartData,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
})

HTML(CDNの場合)

<script src="https://cdn.jsdelivr.net/npm/patternomaly/dist/patternomaly.min.js"></script>
<canvas id="myChart"></canvas>