Allow filling above and below with different colors

Two colors allowed : first one to fill above the target, second to fill below
Tests added

src/plugins/plugin.filler.js

@@ -55,7 +55,8 @@ var mappers = {
 // @todo if (fill[0] === '#')
 function decodeFill(el, index, count) {
  var model = el._model || {};
- var fill = model.fill;
+ var fillOption = model.fill;
+ var fill = fillOption && typeof fillOption === 'object' ? fillOption.target : fillOption;
  var target;
 
  if (fill === undefined) {
@@ -232,47 +233,120 @@ function isDrawable(point) {
  return point && !point.skip;
 }
 
-function drawArea(ctx, curve0, curve1, len0, len1) {
+function fillPointsSets(ctx, curve0, curve1, len0, len1, area, pointSets) {
  var i, cx, cy, r;
+ var fillAreaPointsSet = [];
+ var clipAboveAreaPointsSet = [];
+ var clipBelowAreaPointsSet = [];
 
  if (!len0 || !len1) {
  return;
  }
+ clipAboveAreaPointsSet.push({x: curve1[len1 - 1].x, y: area.top});
+ clipBelowAreaPointsSet.push({x: curve0[0].x, y: area.top});
+ clipBelowAreaPointsSet.push(curve0[0]);
 
  // building first area curve (normal)
- ctx.moveTo(curve0[0].x, curve0[0].y);
+ fillAreaPointsSet.push(curve0[0]);
  for (i = 1; i < len0; ++i) {
- helpers.canvas.lineTo(ctx, curve0[i - 1], curve0[i]);
+ curve0[i].flip = false;
+ fillAreaPointsSet.push(curve0[i]);
+ clipBelowAreaPointsSet.push(curve0[i]);
  }
 
  if (curve1[0].angle !== undefined) {
+ pointSets.fill.push(fillAreaPointsSet);
+ var radialSet = [];
  cx = curve1[0].cx;
  cy = curve1[0].cy;
  r = Math.sqrt(Math.pow(curve1[0].x - cx, 2) + Math.pow(curve1[0].y - cy, 2));
  for (i = len1 - 1; i > 0; --i) {
- ctx.arc(cx, cy, r, curve1[i].angle, curve1[i - 1].angle, true);
+ radialSet.push({cx: cx, cy: cy, radius: r, startAngle: curve1[i].angle, endAngle: curve1[i - 1].angle});
+ }
+ if (radialSet.length) {
+ pointSets.fill.push(radialSet);
  }
  return;
  }
-
  // joining the two area curves
- ctx.lineTo(curve1[len1 - 1].x, curve1[len1 - 1].y);
+ var jointPoint = {};
+ for (var key in curve1[len1 - 1]) {
+ if (curve1[len1 - 1].hasOwnProperty(key)) {
+ jointPoint[key] = curve1[len1 - 1][key];
+ }
+ }
+ jointPoint.joint = true;
+ fillAreaPointsSet.push(jointPoint);
 
  // building opposite area curve (reverse)
  for (i = len1 - 1; i > 0; --i) {
- helpers.canvas.lineTo(ctx, curve1[i], curve1[i - 1], true);
+ curve1[i].flip = true;
+ clipAboveAreaPointsSet.push(curve1[i]);
+ curve1[i - 1].flip = true;
+ fillAreaPointsSet.push(curve1[i - 1]);
  }
+ clipAboveAreaPointsSet.push(curve1[0]);
+ clipAboveAreaPointsSet.push({x: curve1[0].x, y: area.top});
+ clipBelowAreaPointsSet.push({x: curve0[len0 - 1].x, y: area.top});
+
+ pointSets.clipAbove.push(clipAboveAreaPointsSet);
+ pointSets.clipBelow.push(clipBelowAreaPointsSet);
+ pointSets.fill.push(fillAreaPointsSet);
 }
 
-function doFill(ctx, points, mapper, view, color, loop) {
+function clipAndFill(ctx, clippingPointsSets, fillingPointsSets, color) {
+ var i, ilen, j, jlen, set;
+ if (clippingPointsSets) {
+ ctx.save();
+ ctx.beginPath();
+ for (i = 0, ilen = clippingPointsSets.length; i < ilen; i++) {
+ set = clippingPointsSets[i];
+ // Have edge lines straight
+ ctx.moveTo(set[0].x, set[0].y);
+ ctx.lineTo(set[1].x, set[1].y);
+ for (j = 2, jlen = set.length; j < jlen - 1; j++) {
+ helpers.canvas.lineTo(ctx, set[j - 1], set[j], set[j].flip);
+ }
+ ctx.lineTo(set[j].x, set[j].y);
+ }
+ ctx.closePath();
+ ctx.clip();
+ ctx.beginPath();
+ }
+ for (i = 0, ilen = fillingPointsSets.length; i < ilen; i++) {
+ set = fillingPointsSets[i];
+ if (set[0].startAngle !== undefined) {
+ for (j = 0, jlen = set.length; j < jlen; j++) {
+ ctx.arc(set[j].cx, set[j].cy, set[j].radius, set[j].startAngle, set[j].endAngle, true);
+ }
+ } else {
+ ctx.moveTo(set[0].x, set[0].y);
+ for (j = 1, jlen = set.length; j < jlen; j++) {
+ if (set[j].joint) {
+ ctx.lineTo(set[j].x, set[j].y);
+ } else {
+ helpers.canvas.lineTo(ctx, set[j - 1], set[j], set[j].flip);
+ }
+ }
+ }
+ }
+ ctx.closePath();
+ ctx.fillStyle = color;
+ ctx.fill();
+ ctx.restore();
+}
+
+function doFill(ctx, points, mapper, view, colors, loop, area) {
  var count = points.length;
  var span = view.spanGaps;
  var curve0 = [];
  var curve1 = [];
  var len0 = 0;
  var len1 = 0;
+ var pointSets = {clipBelow: [], clipAbove: [], fill: []};
  var i, ilen, index, p0, p1, d0, d1;
 
+ ctx.save();
  ctx.beginPath();
 
  for (i = 0, ilen = (count + !!loop); i < ilen; ++i) {
@@ -287,7 +361,7 @@ function doFill(ctx, points, mapper, view, color, loop) {
  len1 = curve1.push(p1);
  } else if (len0 && len1) {
  if (!span) {
- drawArea(ctx, curve0, curve1, len0, len1);
+ fillPointsSets(ctx, curve0, curve1, len0, len1, area, pointSets);
  len0 = len1 = 0;
  curve0 = [];
  curve1 = [];
@@ -302,11 +376,14 @@ function doFill(ctx, points, mapper, view, color, loop) {
  }
  }
 
- drawArea(ctx, curve0, curve1, len0, len1);
+ fillPointsSets(ctx, curve0, curve1, len0, len1, area, pointSets);
 
- ctx.closePath();
- ctx.fillStyle = color;
- ctx.fill();
+ if (colors.below !== colors.above) {
+ clipAndFill(ctx, pointSets.clipAbove, pointSets.fill, colors.above);
+ clipAndFill(ctx, pointSets.clipBelow, pointSets.fill, colors.below);
+ } else {
+ clipAndFill(ctx, false, pointSets.fill, colors.above);
+ }
 }
 
 module.exports = {
@@ -351,7 +428,7 @@ module.exports = {
  beforeDatasetsDraw: function(chart) {
  var count = (chart.data.datasets || []).length - 1;
  var ctx = chart.ctx;
- var meta, i, el, view, points, mapper, color;
+ var meta, i, el, view, points, mapper, color, colors, fillOption;
 
  for (i = count; i >= 0; --i) {
  meta = chart.getDatasetMeta(i).$filler;
@@ -364,11 +441,17 @@ module.exports = {
  view = el._view;
  points = el._children || [];
  mapper = meta.mapper;
+ fillOption = meta.el._model.fill;
  color = view.backgroundColor || defaults.global.defaultColor;
 
+ colors = {above: color, below: color};
+ if (fillOption && typeof fillOption === 'object') {
+ colors.above = fillOption.above || color;
+ colors.below = fillOption.below || color;
+ }
  if (mapper && color && points.length) {
  helpers.canvas.clipArea(ctx, chart.chartArea);
- doFill(ctx, points, mapper, view, color, el._loop);
+ doFill(ctx, points, mapper, view, colors, el._loop, chart.chartArea);
  helpers.canvas.unclipArea(ctx);
  }
  }

test/fixtures/plugin.filler/fill-line-boundary-origin-span-dual.json

@@ -0,0 +1,54 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [null, null, 2, 3, 4, -4, -2, 1, 0]
+ }, {
+ "backgroundColor": "rgba(0, 192, 0, 0.25)",
+ "data": [6, 2, null, 4, 5, null, null, 2, 1]
+ }, {
+ "backgroundColor": "rgba(192, 0, 0, 0.25)",
+ "data": [7, 3, 4, 5, 6, 1, 4, null, null]
+ }, {
+ "backgroundColor": "rgba(0, 64, 192, 0.25)",
+ "data": [8, 7, 6, -6, -4, -6, 4, 5, 8]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": true,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "display": false
+ }],
+ "yAxes": [{
+ "display": false
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "borderColor": "transparent",
+ "fill": {
+ "target": "origin",
+ "below": "rgba(255, 0, 0, 0.25)"
+ },
+ "tension": 0
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}

test/fixtures/plugin.filler/fill-line-boundary-origin-spline-above.json

@@ -0,0 +1,54 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [null, null, 2, 4, 2, 1, -1, 1, 2]
+ }, {
+ "backgroundColor": "rgba(0, 192, 0, 0.25)",
+ "data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
+ }, {
+ "backgroundColor": "rgba(192, 0, 0, 0.25)",
+ "data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
+ }, {
+ "backgroundColor": "rgba(128, 0, 128, 0.25)",
+ "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": false,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "display": false
+ }],
+ "yAxes": [{
+ "display": false
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "cubicInterpolationMode": "monotone",
+ "borderColor": "transparent",
+ "fill": {
+ "target": "origin",
+ "below": "transparent"
+ }
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}

test/fixtures/plugin.filler/fill-line-dataset-dual.json

@@ -0,0 +1,48 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(255, 0, 0, 0.25)",
+ "data": [0, 1, 2, -1, 0, 2, 1, -1, -2],
+ "fill": {
+ "target": "+1",
+ "above": "rgba(255, 0, 0, 0.25)",
+ "below": "rgba(0, 0, 255, 0.25)"
+ }
+ }, {
+ "data": [0, 0, 0, 0, 0, 0, 0, 0, 0]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": true,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "display": false
+ }],
+ "yAxes": [{
+ "display": false
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "borderColor": "transparent",
+ "tension": 0
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}