chart.jsで境界線以降を塗りつぶしたい。

Question

chart.jsを使ってグラフを表示する機能を実装しています。
chart.jsのドキュメントを一通り見ましたが見つからなかったので質問させていただきます。

下の画像の黄色領域のように、ある境界線(左から数えて7つ目の予定)から奥までを任意の色で埋めることはchart.jsの機能で可能でしょうか？

この質問の画像の右領域に色がつくイメージです。

chart.jsのバージョンは2.5.0です。

Answer 1

この質問を参考にcanvasに直接描画する方法で解決しました。

以下コード

var chartData = {
    labels     : xLabels,   // x軸ラベル
    datasets   : datasets,  // データ値など
    lineAtIndex: 6,         // 境界線を表示するインデックス
};

// オプション類
var options = {
    ・
    ・
    ・
};

// グラフ描画(拡張)
var ctx = document.getElementById("graph").getContext("2d");
var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(
    Chart.controllers.line.prototype,
    {
        draw: function() {
            // 元々の線グラフを描画
            originalLineDraw.apply(this, arguments);

            var chart = this.chart;
            var ctx   = chart.chart.ctx;

            var index = chart.config.data.lineAtIndex;
            if (index) {
                var xaxis = chart.scales['x-axis-0'];
                var yaxis = chart.scales['y-axis-0'];

                // 境界線描画
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top);    // 描画開始位置
                ctx.strokeStyle = '#ff0000';
                ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom); // 描画終了位置
                ctx.stroke();
                ctx.restore();

                // 四角形描画
                ctx.save();
                ctx.fillStyle = "rgba(255, 255, 0, 0.05)";      //塗りつぶす色
                ctx.fillRect(
                    xaxis.getPixelForValue(undefined, index),   // x座標
                    yaxis.top,      // y座標
                    xaxis.width,    // 幅
                    yaxis.height    // 高さ
                );
                ctx.restore();
            }
        }
    }
);
new Chart(
    ctx,
    {
        type    : "line",
        data    : chartData,
        options : options,
    }
);