Data label text colour differs in styled mode when rotation is set

[RainerSchwarze]

Expected behaviour

• Data labels show as text with black colour

Actual behaviour

• Data labels show as text with series colour (leading to blue on blue in column chart)

Live demo with steps to reproduce

• http://jsfiddle.net/7cLrn8t5/1/ (classic version)

• http://jsfiddle.net/1mbjk2n5/1/ (styled version)

• The classic version shows black labels, the styled version shows blue labels

• The data labels are coloured in the styled version using the rule

.highcharts-data-label text {
    fill: $neutral-color-80;
}

• However, when the labels are rotated, there is no g-element with class highcharts-data-label (note "labels" vs. "label").

(classic:
<g class="highcharts-data-labels"><g class="highcharts-data-label"><rect/><text/></g></g>
styled:
<g class="highcharts-data-labels"><text/></g>
)

Affected browser(s)

• tested with Chrome 62

[pawelfus]

Hi @RainerSchwarze

Thank you for reporting this issue. You are right, labels are unreadable at this moment.

Internal note:
This is caused by using renderer.text(str, x, y, useHTML) for rotated labels - class is not passed on:

highcharts/js/parts/DataLabels.js

Lines 310 to 322 in f756279

	dataLabel = point.dataLabel = renderer[
	rotation ? 'text' : 'label' // labels don't rotate
	](
	str,
	0,
	-9999,
	options.shape,
	null,
	null,
	options.useHTML,
	null,
	'data-label'
	);

[pawelfus]

Hi @RainerSchwarze

Thank you for reporting this issue. You are right, labels are unreadable at this moment.

Internal note:
This is caused by using renderer.text(str, x, y, useHTML) for rotated labels - class is not passed on:

highcharts/js/parts/DataLabels.js

Lines 310 to 322 in f756279

	dataLabel = point.dataLabel = renderer[
	rotation ? 'text' : 'label' // labels don't rotate
	](
	str,
	0,
	-9999,
	options.shape,
	null,
	null,
	options.useHTML,
	null,
	'data-label'
	);

[RainerSchwarze]

Hi @pawelfus
thanks - as a temporary fix, do you think, that it would be ok to add this?

.highcharts-data-labels text {
    fill: #333333;
}

Do you know off-hand whether this would break some other appearances?
Thanks, Rainer

[RainerSchwarze]

Hi @pawelfus
thanks - as a temporary fix, do you think, that it would be ok to add this?

.highcharts-data-labels text {
    fill: #333333;
}

Do you know off-hand whether this would break some other appearances?
Thanks, Rainer

[pawelfus]

Hi @RainerSchwarze

Yes, this should be safe. The only problem is multiple series, when text won't be visible again, for example: http://jsfiddle.net/1mbjk2n5/2/

We can workaround this using .highcharts-data-labels.highcharts-series-{index} text, for example: http://jsfiddle.net/1mbjk2n5/3/

[pawelfus]

Hi @RainerSchwarze

Yes, this should be safe. The only problem is multiple series, when text won't be visible again, for example: http://jsfiddle.net/1mbjk2n5/2/

We can workaround this using .highcharts-data-labels.highcharts-series-{index} text, for example: http://jsfiddle.net/1mbjk2n5/3/