Fill before drawing lines (chartjs#6208)

Author: kurkle

src/plugins/plugin.filler.js

@@ -296,23 +296,29 @@ module.exports = {
 		}
 	},
 
-	beforeDatasetDraw: function(chart, args) {
-		var meta = args.meta.$filler;
-		if (!meta) {
-			return;
-		}
-
+	beforeDatasetsDraw: function(chart) {
+		var count = (chart.data.datasets || []).length - 1;
 		var ctx = chart.ctx;
-		var el = meta.el;
-		var view = el._view;
-		var points = el._children || [];
-		var mapper = meta.mapper;
-		var color = view.backgroundColor || defaults.global.defaultColor;
-
-		if (mapper && color && points.length) {
-			helpers.canvas.clipArea(ctx, chart.chartArea);
-			doFill(ctx, points, mapper, view, color, el._loop);
-			helpers.canvas.unclipArea(ctx);
+		var meta, i, el, view, points, mapper, color;
+
+		for (i = count; i >= 0; --i) {
+			meta = chart.getDatasetMeta(i).$filler;
+
+			if (!meta || !meta.visible) {
+				continue;
+			}
+
+			el = meta.el;
+			view = el._view;
+			points = el._children || [];
+			mapper = meta.mapper;
+			color = view.backgroundColor || defaults.global.defaultColor;
+
+			if (mapper && color && points.length) {
+				helpers.canvas.clipArea(ctx, chart.chartArea);
+				doFill(ctx, points, mapper, view, color, el._loop);
+				helpers.canvas.unclipArea(ctx);
+			}
 		}
 	}
 };

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

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