Fix dataset ordering issues

Chart.js draws datasets in the reverse order (the first dataset in the array is drawn last, thus on top of the others), which means that labels for the first dataset should be drawn on top of the other labels but also not discarded when `display: 'auto'`.

Author: simonbrunel

docs/guide/positioning.md

@@ -62,7 +62,7 @@ display: function(context) {
 The `display: 'auto'` option can be used to prevent overlapping labels, based on the following rules when two labels overlap:
 
 - if both labels are `display: true`, they will be drawn overlapping
-- if both labels are `display: 'auto'`, the one with the highest data index will be hidden. If labels are at the same data index, the one with the lowest dataset index will be hidden
+- if both labels are `display: 'auto'`, the one with the highest data index will be hidden. If labels are at the same data index, the one with the highest dataset index will be hidden
 - if one label is `display: true` and the other one is `display: 'auto'`, the one with `'auto'` will be hidden (whatever the data/dataset indices)
 
 ::: tip NOTE

src/layout.js

@@ -112,7 +112,7 @@ export default {
 			var sb = b.$layout;
 
 			return sa._idx === sb._idx
-				? sa._set - sb._set
+				? sb._set - sa._set
 				: sb._idx - sa._idx;
 		});
 

test/fixtures/options.clip/clip-indexable.js

@@ -17,10 +17,11 @@ export default {
 			datasets: [{
 				data: data,
 				datalabels: {
-					backgroundColor: '#ff0077',
-					borderColor: 'white',
-					padding: 32,
+					backgroundColor: '#0f7',
+					borderColor: 'black',
+					padding: 16,
 					clip: [
+						true,
 						false,
 						true,
 						false,
@@ -29,17 +30,15 @@ export default {
 						true,
 						false,
 						true,
-						false
 					]
 				}
 			}, {
 				data: data,
 				datalabels: {
-					backgroundColor: '#00ff77',
-					borderColor: 'black',
-					padding: 16,
+					backgroundColor: '#f07',
+					borderColor: 'white',
+					padding: 32,
 					clip: [
-						true,
 						false,
 						true,
 						false,
@@ -48,6 +47,7 @@ export default {
 						true,
 						false,
 						true,
+						false
 					]
 				}
 			}]

test/fixtures/options.clip/clip-scriptable.js

@@ -17,16 +17,16 @@ export default {
 			datasets: [{
 				data: data,
 				datalabels: {
-					backgroundColor: '#ff0077',
-					borderColor: 'white',
-					padding: 32
+					backgroundColor: '#0f7',
+					borderColor: 'black',
+					padding: 16
 				}
 			}, {
 				data: data,
 				datalabels: {
-					backgroundColor: '#00ff77',
-					borderColor: 'black',
-					padding: 16
+					backgroundColor: '#f07',
+					borderColor: 'white',
+					padding: 32
 				}
 			}]
 		},
@@ -38,7 +38,7 @@ export default {
 				datalabels: {
 					borderWidth: 4,
 					clip: function(ctx) {
-						return (ctx.dataIndex + ctx.datasetIndex) % 2 === 0;
+						return (ctx.dataIndex + ctx.datasetIndex) % 2 === 1;
 					},
 					font: {
 						size: 0

test/fixtures/options.clip/clip-values.js

@@ -17,18 +17,18 @@ export default {
 			datasets: [{
 				data: data,
 				datalabels: {
-					backgroundColor: '#ff0077',
-					borderColor: 'white',
-					clip: true,
-					padding: 32
+					backgroundColor: '#0f7',
+					borderColor: 'black',
+					clip: false,
+					padding: 16
 				}
 			}, {
 				data: data,
 				datalabels: {
-					backgroundColor: '#00ff77',
-					borderColor: 'black',
-					clip: false,
-					padding: 16
+					backgroundColor: '#f07',
+					borderColor: 'white',
+					clip: true,
+					padding: 32
 				}
 			}]
 		},

test/fixtures/options.display/display-values-bool.js

@@ -4,28 +4,28 @@ export default {
 		data: {
 			labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
 			datasets: [{
-				data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+				data: [4, 3, 2, 1, 0, 0, -1, -2, -3, -4],
 				datalabels: {
-					backgroundColor: '#f0f',
-					// display: (fallback: true)
+					backgroundColor: '#ff0',
+					display: false
 				}
 			}, {
-				data: [-4, -2, 0, 2, 4, 2, 0, -2, -4, -2, 0],
+				data: [4, 2, 0, -2, -4, -2, 0, 2, 4, 2, 0],
 				datalabels: {
-					backgroundColor: '#f00',
+					backgroundColor: '#0f0',
 					display: true
 				}
 			}, {
-				data: [4, 2, 0, -2, -4, -2, 0, 2, 4, 2, 0],
+				data: [-4, -2, 0, 2, 4, 2, 0, -2, -4, -2, 0],
 				datalabels: {
-					backgroundColor: '#0f0',
+					backgroundColor: '#f00',
 					display: true
 				}
 			}, {
-				data: [4, 3, 2, 1, 0, 0, -1, -2, -3, -4],
+				data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 				datalabels: {
-					backgroundColor: '#ff0',
-					display: false
+					backgroundColor: '#f0f',
+					// display: (fallback: true)
 				}
 			}]
 		},