Fill between datasets (#7139)

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);
 		}
 	}
 };

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
+			}
+		}
+	}
+};