Chart.js (/) can fill the color below line charts using the "fillColor" attribute (filling the region between the line chart itself and the x-axis).

What I'd like to know is whether Chart.js can be configured to create shaded regions such as the one shown below:

.png

Thank you.

Chart.js (http://www.chartjs/docs/) can fill the color below line charts using the "fillColor" attribute (filling the region between the line chart itself and the x-axis).

What I'd like to know is whether Chart.js can be configured to create shaded regions such as the one shown below:

http://peltiertech./Excel/pix5/HorizBands09.png

Thank you.

• javascript
• charts
• html5-canvas
• chart.js

• I don't think the striping you need is already in the API. But you could draw the striping after the chart has been drawn by setting context.globalCompositeOperation = 'destination-over' and using the data points to apply the stripes with context.fillRect. Note: "destination over" positing will cause your stripes to be drawn under existing content. Be sure you set positing back to its default after you're done: context.globalCompositeOperation = 'source-over'. – markE Commented Jan 18, 2016 at 18:02

1 Answer 1

Shaded Regions for Line Charts

You can extend the chart to do this.

Preview

or

Script

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var ranges = [
            {
                start: 100,
                end: 75,
                color: 'rgba(250,0,0,0.5)'
            },
            {
                start: 75,
                end: 50,
                color: 'rgba(0,250,0,0.5)'
            },
            {
                start: 50,
                end: 25,
                color: 'rgba(0,0,250,0.5)'
            },
            {
                start: 25,
                end: 0,
                color: 'rgba(250,250,0,0.5)'
            }
        ];

        var scale = this.scale;
        var rangesStart = scale.calculateY(ranges[0].start);
        var rangesEnd = scale.calculateY(ranges[ranges.length - 1].end);
        var gradient = this.chart.ctx.createLinearGradient(0, rangesStart, 0, rangesEnd);

        ranges.forEach(function (range) {
            gradient.addColorStop((scale.calculateY(range.start) - rangesStart) / (rangesEnd - rangesStart), range.color);
            gradient.addColorStop((scale.calculateY(range.end) - rangesStart) / (rangesEnd - rangesStart), range.color);
        })

        this.datasets[0].fillColor = gradient;
    }
});

and then

...
new Chart(ctx).LineAlt(data);

If you want to shade the whole background use

var originalDraw = scale.draw;
scale.draw = function() {
    originalDraw.apply(this, arguments);

  ctx.save();
  ctx.fillStyle = gradient;
  ctx.fillRect(scale.calculateX(0), scale.startPoint, scale.width, scale.endPoint - scale.startPoint);
  ctx.restore();
}

instead of this.datasets[0].fillColor = gradient;

Fiddle (below line) - http://jsfiddle/61vg048r/

Fiddle (whole background) - http://jsfiddle/u4Lk7xns/