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

You can use Box Annotations from chartjs-plugin-annotation (official from chartjs). Specify yMin & yMax, and leave xMin & xMax undefined so that it fills the entire x-axis.

Example code:

var chartData = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    type: "line",
    label: "Dataset 1",
    data: [10,-20,40,45,15,5,20,20],
    fill: false
  }]
};

var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
  type: "bar",
  data: chartData,
  options: {
    annotation: {
      annotations: [{
        drawTime: "beforeDatasetsDraw",
        type: "box",
        xScaleID: "x-axis-0",
        yScaleID: "y-axis-0",
        borderWidth: 0,
        yMin: 25,
        yMax: 40,
        backgroundColor: "rgba(46, 204, 113,0.3)"
      }]
    }
  }
});