色

チャートは3つの色のオプションをサポートします。

• 幾何学的要素については、背景と枠線の色を変更できます。
• テキスト要素については、フォントの色を変更できます。

また、全体のキャンバスの背景を変更することもできます。

デフォルトの色

色が指定されていない場合、Chart.defaultsからのグローバルなデフォルトの色が使用されます。

名前	タイプ	説明	デフォルト値
backgroundColor	色	背景色	rgba(0, 0, 0, 0.1)
borderColor	色	枠線の色	rgba(0, 0, 0, 0.1)
color	色	フォントの色	#666

Chart.defaultsのこれらのプロパティを更新することで、デフォルトの色をリセットできます。

Chart.defaults.backgroundColor = '#9BD0F5';
Chart.defaults.borderColor = '#36A2EB';
Chart.defaults.color = '#000';

データセットごとの色の設定

チャートに複数のデータセットがある場合、デフォルトの色を使用すると、個々のデータセットを区別できなくなります。その場合、各データセットのbackgroundColorとborderColorを設定できます。

const data = {
  labels: ['A', 'B', 'C'],
  datasets: [
    {
      label: 'Dataset 1',
      data: [1, 2, 3],
      borderColor: '#36A2EB',
      backgroundColor: '#9BD0F5',
    },
    {
      label: 'Dataset 2',
      data: [2, 3, 4],
      borderColor: '#FF6384',
      backgroundColor: '#FFB1C1',
    }
  ]
};

ただし、各データセットの色を設定するには、追加の作業が必要になる場合があります。その場合は、事前に定義されたパレットまたは生成されたパレットを使用する次のプラグインの使用を検討してください。

デフォルトの色パレット

色に特別な好みがない場合は、組み込みのColorsプラグインを使用できます。これは、7つのChart.jsブランドカラーのパレットを循環します。

必要なのは、プラグインをインポートして登録することだけです。

import { Colors } from 'chart.js';
Chart.register(Colors);

注記

Chart.jsのUMDバージョンを使用している場合、このプラグインはデフォルトで有効になっています。enabledオプションをfalseに設定することで無効にできます。

const options = {
  plugins: {
    colors: {
      enabled: false
    }
  }
};

ランタイムでの動的データセット

デフォルトでは、色のプラグインは、境界線または背景の色が指定されていない状態でチャートを初期化する場合にのみ機能します。たとえば、ランタイムで動的データセットを使用する場合など、色のプラグインに常にデータセットの色を強制的に付けさせたい場合は、forceOverrideオプションをtrueに設定する必要があります。

const options = {
  plugins: {
    colors: {
      forceOverride: true
    }
  }
};

高度な色パレット

より柔軟な色パレットの定義を提供するプラグインについては、awesome list (新しいウィンドウで開きます)を参照してください。

色の形式

次のいずれかの表記で文字列として色を指定できます。

表記	例	透過性を含む例
16進数 (新しいウィンドウで開きます)	#36A2EB	#36A2EB80
RGB (新しいウィンドウで開きます)またはRGBA (新しいウィンドウで開きます)	rgb(54, 162, 235)	rgba(54, 162, 235, 0.5)
HSL (新しいウィンドウで開きます)またはHSLA (新しいウィンドウで開きます)	hsl(204, 82%, 57%)	hsla(204, 82%, 57%, 0.5)

あるいは、文字列の色のかわりにCanvasPattern (新しいウィンドウで開きます)またはCanvasGradient (新しいウィンドウで開きます)オブジェクトを渡して、興味深い効果を実現できます。

パターンとグラデーション

たとえば、画像のパターンでデータセットを塗りつぶすことができます。

const img = new Image();
img.src = 'https://example.com/my_image.png';
img.onload = () => {
  const ctx = document.getElementById('canvas').getContext('2d');
  const fillPattern = ctx.createPattern(img, 'repeat');
  const chart = new Chart(ctx, {
    data: {
      labels: ['Item 1', 'Item 2', 'Item 3'],
      datasets: [{
        data: [10, 20, 30],
        backgroundColor: fillPattern
      }]
    }
  });
};

パターン塗りつぶしは、視覚障害のある視聴者（例：色覚異常または部分的な視力）がデータをより簡単に理解する (新しいウィンドウで開きます)のに役立ちます。

Patternomaly (新しいウィンドウで開きます)ライブラリを使用して、データセットを塗りつぶすパターンを生成できます。

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