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'`.
chartjs · Aug 23, 2019 · 9bd22fa · 9bd22fa
1 parent d85e750
commit 9bd22fa
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 35 deletions.
diff --git a/docs/guide/positioning.md b/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

diff --git a/src/layout.js b/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;
 		});
 

diff --git a/test/fixtures/options.clip/clip-indexable.js b/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
 					]
 				}
 			}]

diff --git a/test/fixtures/options.clip/clip-scriptable.js b/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

diff --git a/test/fixtures/options.clip/clip-values.js b/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
 				}
 			}]
 		},

diff --git a/test/fixtures/options.display/display-values-bool.js b/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)
 				}
 			}]
 		},