New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
RainerSchwarze opened this Issue Nov 16, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@RainerSchwarze

RainerSchwarze commented Nov 16, 2017

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

.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

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Nov 16, 2017

Contributor

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:

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

Contributor

pawelfus commented Nov 16, 2017

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:

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

@pawelfus pawelfus added the Bug label Nov 16, 2017

@RainerSchwarze

This comment has been minimized.

Show comment
Hide comment
@RainerSchwarze

RainerSchwarze Nov 16, 2017

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 commented Nov 16, 2017

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

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Nov 17, 2017

Contributor

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/

Contributor

pawelfus commented Nov 17, 2017

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment