Chart.js-折线图中背景的特定部分的颜色

Question

I have a line chart much like this one: http://www.chartjs.org/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 welcome. 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!

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.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script> <canvas id="canvas"></canvas>