chart.JSの設定

chart.jsで見た目をカスタマイズする機会があったので備忘録としてメモします。

補助線の表示/非表示

gridのdisplayをtrueかfalseで表示/非表示を変更できます

x: {
    grid: {
        display: false // x軸の補助線を非表示にする
    },

}

目盛のスタイル

ticksの設定をいじることで変更できます。
color:文字色
font size:フォントサイズ
font wheight:太文字
x: {

    ticks: {
        color: '#0C2360',
        font: {
            size: 15,
            weight: "bold"
        }
    },
}

グラデーション

    // canvasを取得
    const ctx = document.getElementById('canvas_id').getContext('2d');

    // グラデーションの変数:gradientBlueを定義
    const gradientBlue = ctx.createLinearGradient(0, 0, 0, 300);

    //gradientBlueの調整
    gradientBlue.addColorStop(0, '#297BC4');
    gradientBlue.addColorStop(0.5, '#297BC4');
    gradientBlue.addColorStop(1, '#0C2360');



    data: {
        datasets: [{
            //ここで作成したグラデーションを設定
            backgroundColor: gradientBlue,
        }]
    },

グラデーション応用

データの数に応じて、同じ系統の色で段々と色の濃淡が変わるようなグラデーションを作って見ます。
こんなイメージです。

//

const date = [23,35,・・・・・・・,67,89]

//　データ総数を取得
data_count = data.length;

// canvasを読み込み
const ctx = document.getElementById('canvas_id').getContext('2d');

// グラデーションのパターンを格納する配列を準備
var colors = [];

//iの値で透明度を変化させてデータの総数通りの背景色を生成して配列に格納
for (var i = 0; i < data_count; i++) {
    var alpha = 1.0 - (0.1 * i); // 透明度を調整する値
    colors[i] = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height * 0.5);
    colors[i].addColorStop(0, 'rgba(41, 123, 196, ' + alpha + ')'); // 開始色（薄い青）
    colors[i].addColorStop(1, 'rgba(12, 35, 96, ' + alpha + ')'); // 終了色（濃い青）
}


//---省略----//


data: {
    datasets: [{
        //ここで作成したグラデーションを設定
        backgroundColor: colors,
    }]
},

//---省略----//