Fill before drawing lines (#6208)

diff --git a/src/plugins/plugin.filler.js b/src/plugins/plugin.filler.js
index e89bb0d8785c6ba4556def180cc445699e56f6c6..434a795eba7cb47207eef384cc5e947830dd7ba9 100644 (file)
--- a/src/plugins/plugin.filler.js
+++ b/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);
+                       }
                }
        }
 };

diff --git a/test/fixtures/plugin.filler/fill-line-dataset-border.json b/test/fixtures/plugin.filler/fill-line-dataset-border.json
new file mode 100644 (file)
index 0000000..46d9233
--- /dev/null
+++ b/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
+        }
+    }
+}

diff --git a/test/fixtures/plugin.filler/fill-line-dataset-border.png b/test/fixtures/plugin.filler/fill-line-dataset-border.png
new file mode 100644 (file)
index 0000000..01afc9f
Binary files /dev/null and b/test/fixtures/plugin.filler/fill-line-dataset-border.png differ