Acceptable Range Highlighting of Background in Chart.js 2.0

Question

I\'m working on building a simple line chart using Chart.js (the 2.0.2 beta) and I\'d like to highlight a particular range of the chart\'s background to highlight an \"accep

Answer 1

The following implements the required functionality in Chart.js 2.* (uses Chart.js 2.1.4, which is the current version at the time of writing):

https://jsfiddle.net/742zut83/22/

The implementation is based on extending the line chart type and overriding the draw function. The new draw function checks whether within the line chart's data exists the following, which defines the y-range to highlight:

yHighlightRange : {
  begin: 6.5,
  end: 12.5
}

If it does not exist, then the original draw function is called. If it exists, then a rectangle spanning from the left to the right and within the y-range specified is drawn. After the rectangle is drawn, the original draw function is called, in order to complete the drawing of the line chart.

The first implementation did not draw a rectangle. Among other deficiencies it had, it drew all pixel-lines separately. Like TV scanlines (yes, I'm old). But the old code is here (in case you care about line drawing):

https://jsfiddle.net/742zut83/17/

The current code is as follows:

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 yHighlightRange = chart.config.data.yHighlightRange;

    // If the object exists.
    if (yHighlightRange !== undefined) {
      var ctx = chart.chart.ctx;

      var yRangeBegin = yHighlightRange.begin;
      var yRangeEnd = yHighlightRange.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 = 'rgba(0, 255, 0, 0.3)';
      // 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: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
    }],
    // This, if it exists at all, defines the highlight region.
    yHighlightRange: {
      begin: 6.5,
      end: 12.5
    }
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});