Chart.js ２本縦線を引いて間を塗りつぶす。

グラフに任意に１本の縦線しか書き足さない場合は、
chart.js 任意の点でグラフに縦線を描画する - Oboe吹きプログラマの黙示録
のとおり。

では、２本引く場合は、chart.js 任意の点でグラフに縦線を描画する - Oboe吹きプログラマの黙示録
を例に、、
単にインデックスの配列で２点を渡して CANVAS で stroke() の実行を２回にするだけ。

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;
      if (chart.config.data.lineAtIndex){
         for(i in chart.config.data.lineAtIndex){
            var xaxis = chart.scales['x-axis-0'];
            var yaxis = chart.scales['y-axis-0'];
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(xaxis.getPixelForValue(undefined
, chart.config.data.lineAtIndex[i]), yaxis.top);
            ctx.strokeStyle = '#ff0000';
            ctx.lineWidth = 1;
            ctx.lineTo(xaxis.getPixelForValue(undefined
, chart.config.data.lineAtIndex[i]), yaxis.bottom);
            ctx.stroke();
            ctx.restore();
         }
      }
   }
});

var graph = {
   labels: [ "0", "1", "2", "3", "4", "5", "6", "7", ],
   datasets: [{
      // 省略
   },{
      // 省略
   }]
};

Chart.plugins.register({
   beforeDraw: function(c){
      var ctx = c.chart.ctx;
      ctx.fillStyle = "rgba(255, 255, 255, 1)";
      ctx.fillRect(0, 0, c.chart.width, c.chart.height);
   }
});
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: graph,
    options: options
});
/***** 配列で指定 *************/
graph.lineAtIndex = [ 2, 4 ];

myChart.update();

次に間を塗りつぶすように修正する

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;
      if (chart.config.data.lineAtIndex){
         for(i in chart.config.data.lineAtIndex){
            var xaxis = chart.scales['x-axis-0'];
            var yaxis = chart.scales['y-axis-0'];
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(xaxis.getPixelForValue(undefined, chart.config.data.lineAtIndex[i]), yaxis.top);
            ctx.strokeStyle = '#ff0000';
            ctx.lineWidth = 1;
            ctx.lineTo(xaxis.getPixelForValue(undefined, chart.config.data.lineAtIndex[i]), yaxis.bottom);
            ctx.stroke();
            ctx.restore();
         }
         var xaxis = chart.scales['x-axis-0'];
         var yaxis = chart.scales['y-axis-0'];
         var x = xaxis.getPixelForValue(undefined, chart.config.data.lineAtIndex[0]);
         var w = xaxis.getPixelForValue(undefined, chart.config.data.lineAtIndex[1]) - x;
         ctx.save();
         ctx.fillStyle = "rgba(255, 230, 230, 0.6)";
         ctx.fillRect(x, yaxis.top, w, yaxis.height);
         ctx.restore();
      }
   }
});

chart.js のデータセットコントローラの書き方しだいで、こんなに変わってくる。