Fill between datasets (#7139)

diff --git a/src/plugins/plugin.filler.js b/src/plugins/plugin.filler.js
index 4843c9c3f7e6a32d6af988b6b5452cac6fdad5e4..b296ac8c4cfd6f81ea6dcdcb8ac586f58d405e1e 100644 (file)
--- a/src/plugins/plugin.filler.js
+++ b/src/plugins/plugin.filler.js
@@ -435,7 +435,6 @@ export default {
        beforeDatasetsDraw(chart) {
                const metasets = chart._getSortedVisibleDatasetMetas();
                const area = chart.chartArea;
-               const ctx = chart.ctx;
                let i, meta;
 
                for (i = metasets.length - 1; i >= 0; --i) {
@@ -445,23 +444,26 @@ export default {
                                meta.line.updateControlPoints(area);
                        }
                }
+       },
 
-               for (i = metasets.length - 1; i >= 0; --i) {
-                       meta = metasets[i].$filler;
+       beforeDatasetDraw(chart, args) {
+               const area = chart.chartArea;
+               const ctx = chart.ctx;
+               const meta = args.meta.$filler;
 
-                       if (!meta || meta.fill === false) {
-                               continue;
-                       }
-                       const {line, target, scale} = meta;
-                       const lineOpts = line.options;
-                       const fillOption = lineOpts.fill;
-                       const color = lineOpts.backgroundColor || defaults.color;
-                       const {above = color, below = color} = fillOption || {};
-                       if (target && line.points.length) {
-                               clipArea(ctx, area);
-                               doFill(ctx, {line, target, above, below, area, scale});
-                               unclipArea(ctx);
-                       }
+               if (!meta || meta.fill === false) {
+                       return;
+               }
+
+               const {line, target, scale} = meta;
+               const lineOpts = line.options;
+               const fillOption = lineOpts.fill;
+               const color = lineOpts.backgroundColor || defaults.color;
+               const {above = color, below = color} = fillOption || {};
+               if (target && line.points.length) {
+                       clipArea(ctx, area);
+                       doFill(ctx, {line, target, above, below, area, scale});
+                       unclipArea(ctx);
                }
        }
 };

diff --git a/test/fixtures/plugin.filler/fill-line-dataset-border.png b/test/fixtures/plugin.filler/fill-line-dataset-border.png
index 01afc9f35484e90b65e2e83626712a1b407e59b5..ba3aef582f151d465db070734c2ae75c6ce1873c 100644 (file)
Binary files a/test/fixtures/plugin.filler/fill-line-dataset-border.png and b/test/fixtures/plugin.filler/fill-line-dataset-border.png differ

diff --git a/test/fixtures/plugin.filler/fill-line-dataset-stepped.png b/test/fixtures/plugin.filler/fill-line-dataset-stepped.png
index e6dc9e7d9bc2cb6308bab10f3b629880b450d877..072fc76bf7de38ad0992420672095ac2fd3e0cc9 100644 (file)
Binary files a/test/fixtures/plugin.filler/fill-line-dataset-stepped.png and b/test/fixtures/plugin.filler/fill-line-dataset-stepped.png differ

diff --git a/test/fixtures/plugin.filler/fill-radar-dataset-border.png b/test/fixtures/plugin.filler/fill-radar-dataset-border.png
index ee53eccaa892eb7fdb13939e7aca8e2f310750b9..32243c2bb678e74e9be3866c70009a0739576080 100644 (file)
Binary files a/test/fixtures/plugin.filler/fill-radar-dataset-border.png and b/test/fixtures/plugin.filler/fill-radar-dataset-border.png differ

diff --git a/test/fixtures/plugin.filler/fill-radar-dataset-order.js b/test/fixtures/plugin.filler/fill-radar-dataset-order.js
new file mode 100644 (file)
index 0000000..882be81
--- /dev/null
+++ b/test/fixtures/plugin.filler/fill-radar-dataset-order.js
@@ -0,0 +1,28 @@
+module.exports = {
+       config: {
+               type: 'radar',
+               data: {
+                       labels: ['English', 'Maths', 'Physics', 'Chemistry', 'Biology', 'History'],
+                       datasets: [
+                               {
+                                       order: 1,
+                                       borderColor: '#D50000',
+                                       backgroundColor: 'rgba(245, 205, 121,0.5)',
+                                       data: [65, 75, 70, 80, 60, 80]
+                               },
+                               {
+                                       order: 0,
+                                       backgroundColor: 'rgba(0, 168, 255,1)',
+                                       data: [54, 65, 60, 70, 70, 75]
+                               }
+                       ]
+               },
+               options: {
+                       legend: false,
+                       title: false,
+                       scale: {
+                               display: false
+                       }
+               }
+       }
+};

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