I have a line chart much like this one: .html

I would like to color the areas -100 < y < -40 and 40 < y < 100 a slight tint of red to indicate that point that fall in that area are in a danger zone.

This was a quick sketch using paint. Anything similar to this is wele. How can I do this? I tried looking into the documentation but found nothing.

I currently have a workaround using a line chart stacked over a horizontal bar chart but it is far from ideal.

Thanks in advance!

I have a line chart much like this one: http://www.chartjs/samples/latest/charts/line/basic.html

I would like to color the areas -100 < y < -40 and 40 < y < 100 a slight tint of red to indicate that point that fall in that area are in a danger zone.

This was a quick sketch using paint. Anything similar to this is wele. How can I do this? I tried looking into the documentation but found nothing.

I currently have a workaround using a line chart stacked over a horizontal bar chart but it is far from ideal.

Thanks in advance!

• javascript
• chart.js

• Please share your code so someone here on SO could work on it and help you – beaver Commented Mar 20, 2018 at 7:48
• @Farias: have you tried my proposed solution? – beaver Commented Mar 22, 2018 at 9:06

1 Answer 1

You can use annotation plugin and in particular Box annotations.

Here below there is an example with Scatter chart:

var randomScalingFactor = function() {
  return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
var randomColor = function(opacity) {
  return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
};
var data = {
  datasets: [{
    label: "My First dataset",
    data: [{
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }]
  }, {
    label: "My Second dataset",
    data: [{
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }, {
      x: randomScalingFactor(),
      y: randomScalingFactor(),
    }]
  }]
};
data.datasets.forEach(function(dataset) {
  dataset.borderColor = randomColor(0.4);
  dataset.backgroundColor = randomColor(0.1);
  dataset.pointBorderColor = randomColor(0.7);
  dataset.pointBackgroundColor = randomColor(0.5);
  dataset.pointBorderWidth = 1;
});

var ctx = document.getElementById("canvas").getContext("2d");
window.myScatter = new Chart(ctx, {
	type: 'scatter',
  data: data,
  options: {
    scales: {
      xAxes: [{
        position: 'bottom',
        gridLines: {
          zeroLineColor: "rgba(0,255,0,1)"
        },
        scaleLabel: {
          display: true,
          labelString: 'x axis'
        },
      }],
      yAxes: [{
        position: 'left',
        gridLines: {
          zeroLineColor: "rgba(0,255,0,1)"
        },
        scaleLabel: {
          display: true,
          labelString: 'y axis'
        },
        ticks: {
        	min: -100,
          max: 100
        }
      }]
    },
    annotation: {
      drawTime: "afterDraw",
      events: ['dblclick'],
      annotations: [{
      	id: 'low-box',
        type: 'box',
        xScaleID: 'x-axis-1',
        yScaleID: 'y-axis-1',
        xMin: -100,
        xMax: 100,
        yMin: -100,
        yMax: -40,
        backgroundColor: 'rgba(255, 0, 0, 0.3)',
        //borderColor: 'rgb(255, 0, 0)',
        borderWidth: 1
      },{
      	id: 'hi-box',
        type: 'box',
        xScaleID: 'x-axis-1',
        yScaleID: 'y-axis-1',
        xMin: -100,
        xMax: 100,
        yMin: 100,
        yMax: 40,
        backgroundColor: 'rgba(255, 0, 0, 0.3)',
        //borderColor: 'rgb(255, 0, 0)',
        borderWidth: 1
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>

<canvas id="canvas"></canvas>