Fixed #6487, contrast color was not applied for a justified label on …

…a column.
highcharts · Mar 22, 2017 · 27aff13 · 27aff13
1 parent dcd3737
commit 27aff13
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 3 deletions.
diff --git a/js/parts/DataLabels.js b/js/parts/DataLabels.js
@@ -196,9 +196,9 @@ Series.prototype.drawDataLabels = function () {
 				style.color = pick(options.color, style.color, series.color, '${palette.neutralColor100}');
 				// Get automated contrast color
 				if (style.color === 'contrast') {
+					point.contrastColor = renderer.getContrast(point.color || series.color);
 					style.color = options.inside || options.distance < 0 || !!seriesOptions.stacking ?
-						renderer.getContrast(point.color || series.color) :
-						'${palette.neutralColor100}';
+						point.contrastColor : '${palette.neutralColor100}';
 				}
 				if (seriesOptions.cursor) {
 					style.cursor = seriesOptions.cursor;
@@ -361,7 +361,14 @@ Series.prototype.alignDataLabel = function (point, dataLabel, options, alignTo,
 
 		// Handle justify or crop
 		if (justify) {
-			this.justifyDataLabel(dataLabel, options, alignAttr, bBox, alignTo, isNew);
+			point.isLabelJustified = this.justifyDataLabel(
+				dataLabel,
+				options,
+				alignAttr,
+				bBox,
+				alignTo,
+				isNew
+			);
 
 		// Now check that the data label is within the plot area
 		} else if (pick(options.crop, true)) {
@@ -445,6 +452,8 @@ Series.prototype.justifyDataLabel = function (dataLabel, options, alignAttr, bBo
 		dataLabel.placed = !isNew;
 		dataLabel.align(options, null, alignTo);
 	}
+
+	return justified;
 };
 
 /**
@@ -861,5 +870,12 @@ if (seriesTypes.column) {
 
 		// Call the parent method
 		Series.prototype.alignDataLabel.call(this, point, dataLabel, options, alignTo, isNew);
+
+		// If label was justified and we have contrast, set it:
+		if (point.isLabelJustified && point.contrastColor) {
+			point.dataLabel.css({
+				color: point.contrastColor
+			});
+		}
 	};
 }
diff --git a/samples/unit-tests/datalabels/contrast/demo.details b/samples/unit-tests/datalabels/contrast/demo.details
@@ -0,0 +1,6 @@
+---
+ resources:
+   - https://code.jquery.com/qunit/qunit-2.0.1.js
+   - https://code.jquery.com/qunit/qunit-2.0.1.css
+ js_wrap: b
+...
diff --git a/samples/unit-tests/datalabels/contrast/demo.html b/samples/unit-tests/datalabels/contrast/demo.html
@@ -0,0 +1,6 @@
+<script src="https://code.highcharts.com/highcharts.js"></script>
+
+<div id="qunit"></div>
+<div id="qunit-fixture"></div>
+
+<div id="container"></div>
diff --git a/samples/unit-tests/datalabels/contrast/demo.js b/samples/unit-tests/datalabels/contrast/demo.js
@@ -0,0 +1,31 @@
+QUnit.test('#6487: Column\'s data label with contrast after justification.', function (assert) {
+    var chart = Highcharts.chart('container', {
+            series: [{
+                data: [15, 14.5, 14, 12, 11, 10, 9, 8, 7, 6, 5, 4],
+                type: 'column',
+                colorByPoint: true,
+                dataLabels: {
+                    enabled: true,
+                    inside: false,
+                    style: {
+                        textOutline: null
+                    }
+                }
+            }],
+            yAxis: {
+                endOnTick: false,
+                max: 15.3
+            }
+        }),
+        point = chart.series[0].points[1];
+
+    assert.strictEqual(
+        Highcharts.Color(
+            point.dataLabel.element.children[0].style.color
+        ).get(),
+        Highcharts.Color(
+            chart.renderer.getContrast(point.color)
+        ).get(),
+        'Correct color for justified label on a column.'
+    );
+});
diff --git a/samples/unit-tests/datalabels/members/demo.js b/samples/unit-tests/datalabels/members/demo.js
@@ -16,6 +16,7 @@ QUnit.test('Series.drawDataLabels', function (assert) {
             },
             chart: {
                 renderer: {
+                    getContrast: H.Renderer.prototype.getContrast,
                     label: function () {
                         return {
                             attribs: {},