title: Multiple Range Highlighting of Background in Chart.js
body: <p>From this <a href="https://stackoverflow.com/questions/36685745/acceptable-range-highlighting-of-background-in-chart-js-2-0">question</a> I'm looking to turn into a multiple range highlight</p>
  <p>But there 1 annoying bug I didn't succeed to solve</p>
  <ul>
  <li>background is superposing, if you uncheck a dataset on the top, background alpha change</li>
  </ul>
  <p>Here my work so far: <a href="https://jsfiddle.net/742zut83/588/" rel="nofollow noreferrer">https://jsfiddle.net/742zut83/588/</a></p>
  <p>Why the custom draw function executed for each dataset? Once highlights done <code>originalLineDraw</code> is returned</p>
  <pre><code>draw : function() {
    var chart = this.chart;
    // Get the object that determines the region to highlight.
    var yHighlightRanges = chart.config.data.yHighlightRanges;
  
    let ctx = chart.chart.ctx;
  
    yHighlightRanges.forEach(function(Range) {
  
      var yRangeBegin = Range.begin;
      var yRangeEnd = Range.end;
  
      var xaxis = chart.scales['x-axis-0'];
      var yaxis = chart.scales['y-axis-0'];
  
      var yRangeBeginPixel = yaxis.getPixelForValue(yRangeBegin);
      var yRangeEndPixel = yaxis.getPixelForValue(yRangeEnd);
  
      ctx.save();
  
      // The fill style of the rectangle we are about to fill.
      ctx.fillStyle = Range.rgb;
      // Fill the rectangle that represents the highlight region. The parameters are the closest-to-starting-point pixel's x-coordinate,
      // the closest-to-starting-point pixel's y-coordinate, the width of the rectangle in pixels, and the height of the rectangle in pixels, respectively.
      ctx.fillRect(xaxis.left, Math.min(yRangeBeginPixel, yRangeEndPixel), xaxis.right - xaxis.left, Math.max(yRangeBeginPixel, yRangeEndPixel) - Math.min(yRangeBeginPixel, yRangeEndPixel));
  
      ctx.restore();
    });
  
    // Apply the original draw function for the line chart.
    originalLineDraw.apply(this, arguments);
  }
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ctx = document.getElementById("myChart");
  
  // The original draw function for the line chart. This will be applied after we have drawn our highlight range (as a rectangle behind the line chart).
  var originalLineDraw = Chart.controllers.line.prototype.draw;
  // Extend the line chart, in order to override the draw function.
  Chart.helpers.extend(Chart.controllers.line.prototype, {
    draw : function() {
      var chart = this.chart;
      // Get the object that determines the region to highlight.
      var yHighlightRanges = chart.config.data.yHighlightRanges;
  
      let ctx = chart.chart.ctx;
      
      yHighlightRanges.forEach(function(Range) {
      
        var yRangeBegin = Range.begin;
        var yRangeEnd = Range.end;
  
        var xaxis = chart.scales['x-axis-0'];
        var yaxis = chart.scales['y-axis-0'];
  
        var yRangeBeginPixel = yaxis.getPixelForValue(yRangeBegin);
        var yRangeEndPixel = yaxis.getPixelForValue(yRangeEnd);
  
        ctx.save();
  
        // The fill style of the rectangle we are about to fill.
        ctx.fillStyle = Range.rgb;
        // Fill the rectangle that represents the highlight region. The parameters are the closest-to-starting-point pixel's x-coordinate,
        // the closest-to-starting-point pixel's y-coordinate, the width of the rectangle in pixels, and the height of the rectangle in pixels, respectively.
        ctx.fillRect(xaxis.left, Math.min(yRangeBeginPixel, yRangeEndPixel), xaxis.right - xaxis.left, Math.max(yRangeBeginPixel, yRangeEndPixel) - Math.min(yRangeBeginPixel, yRangeEndPixel));
  
        ctx.restore();
      });
  
      // Apply the original draw function for the line chart.
      originalLineDraw.apply(this, arguments);
    }
  });
  
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [
          {
          label: 'Season 1',
          data: [12, 17, 3, 5, 9, 3],
          fill: false,
          borderColor: 'rgba(0, 200, 0, 1)'
          },
        {
          label: 'Season 2',
          data: [5, 14, 3, 15, 9, 13],
          fill: false,
          borderColor: 'rgba(200, 0, 0, 1)'
          }
      ],
      // This, if it exists at all, defines the highlight region.
      yHighlightRanges : [
          {
          begin: 0,
          end: 6,
          rgb: 'rgba(100, 100, 100, 0.2)'
        },
        {
          begin: 6,
          end: 12,
          rgb: 'rgba(200, 100, 200, 0.2)'
        },
        {
          begin: 12,
          end: 18,
          rgb: 'rgba(0, 100, 200, 0.2)'
        }
      ]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:true
          }
        }]
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"&gt;&lt;/script&gt;
  &lt;canvas id="myChart" width="400" height="400"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>