Elements

チャートタイプは各データセット毎にスタイルの設定が可能ですが、 時には全てのデータセットで共通のスタイルを指定したい場合があります。 よくある例は、棒グラフの全ての棒を同じ色のストローク(枠線)で生成し、 塗りつぶしを各データ毎に変更するといったことです。 オプションとして arc、line、point、rectangle の4つの要素を設定することができます。 これらのオプションを設定すると、データセット毎の設定が指定されていない限り、 全てのオブジェクトに適用されます。

グローバル設定

elementオプションは、チャート毎か、グローバルに指定することができます。 グローバルオプションはChart.defaults.global.elementsで定義されています。 例えば、グローバルに全ての棒グラフのボーダー幅を設定する場合、以下のように指定します。

Chart.defaults.global.elements.rectangle.borderWidth = 2;

point

point要素は、折れ線グラフ(LineChart)やバブルチャート(BubbleChart)の"点"を表すために使用します。

グローバルオプションはChart.defaults.global.elements.pointで定義されています。

pointスタイル

以下のスタイルを指定することができます。

• circle
• cross
• crossRot
• dash
• line
• rect
• rectRounded
• rectRot
• star
• triangle

値が画像の場合、drawImageを使ってキャンバスに表示します。

line

line要素は線グラフ(LineChart)の"線"を表すために使用します。

グローバルオプションはChart.defaults.global.elements.lineで定義されています。

デモ1

ポイントの指定と、線のスタイルを指定しています。

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
Chart.defaults.global.elements.point = {
    radius: 5,              // ポイントの半径
    pointStyle: 'triangle', // ポイントのスタイル
    hitRadius: 20,          // ホバー検出の半径
    hoverRadius: 20,        // ホバー時の半径
};
Chart.defaults.global.elements.line = {
    tension: 0,       // 折れ線グラフ
    fill: 'end',      // 上側を塗りつぶす
    borderDash: [],   // ダッシュ線設定(.lineを指定する場合必要な模様)
};
new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'line',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1,
        }]
    },
});

HTML

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

rectangle

rectangle要素は棒グラフ(BarChart)の"棒"を表すために使用します。

グローバルオプションはChart.defaults.global.elements.rectangleで定義されています。

デモ2

棒のスタイルを指定しています。

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
Chart.defaults.global.elements.rectangle = {
    borderWidth: 5,       // 枠線の太さ
    borderSkipped: 'top'  // 上部の枠線の除外
};
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
    }
});

HTML

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

arc

arc要素は鶏頭図(PolarAreaChart)、ドーナツグラフ(DoughnutChart)、円グラフ(PieChart)での"弧"のスタイルに使用されます。

グローバルオプションはChart.defaults.global.elements.arcで定義されています。

デモ3

孤のスタイルを指定しています。

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
Chart.defaults.global.elements.arc = {
    borderWidth: 5,       // 枠線の太さ
};
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Blue", "Red", "Yellow"],
        datasets:[{
            data: [65, 59, 80],
            backgroundColor: [
                "rgb(54, 162, 235)",
                "rgb(255, 99, 132)",
                "rgb(255, 206, 86)",
            ],
        }]
    },
});

HTML

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