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

The last data label has a different class format than the others, when useHTML property is set to true #7287

Closed
PaulDalek opened this Issue Oct 17, 2017 · 6 comments

Comments

Projects
None yet
4 participants
@PaulDalek
Contributor

PaulDalek commented Oct 17, 2017

Expected behaviour

All data labels have the same CSS class format:
highcharts-label highcharts-data-label highcharts-data-label-color-# highcharts-tracker

Actual behaviour

The last data label has a different class format than the others:
highcharts-data-labels highcharts-series-0 highcharts-pie-series highcharts-tracker

It seems it happens from v5.0.13

Live demos

http://jsfiddle.net/4f0ocxun/ - v6.0.1, the last label class is different
http://jsfiddle.net/rLqkq0xj/ - v5.0.12, works fine

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Oct 23, 2017

Collaborator

I can't reproduce this - see http://jsfiddle.net/highcharts/4f0ocxun/1/.

Collaborator

TorsteinHonsi commented Oct 23, 2017

I can't reproduce this - see http://jsfiddle.net/highcharts/4f0ocxun/1/.

@PaulDalek

This comment has been minimized.

Show comment
Hide comment
@PaulDalek

PaulDalek Oct 23, 2017

Contributor

Here is an image showing this:

data-labels

Not sure if this is a bug or if it is intentional though.

Contributor

PaulDalek commented Oct 23, 2017

Here is an image showing this:

data-labels

Not sure if this is a bug or if it is intentional though.

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Oct 30, 2017

Collaborator

It's not intentional - I see it some of the times but not all. And it seems to only appear if I hover close to the chart when it is animating in... Are there any side effects of it that you are aware of?

Collaborator

TorsteinHonsi commented Oct 30, 2017

It's not intentional - I see it some of the times but not all. And it seems to only appear if I hover close to the chart when it is animating in... Are there any side effects of it that you are aware of?

@barryp

This comment has been minimized.

Show comment
Hide comment
@barryp

barryp Nov 22, 2017

I see this too, with v5.0.12 I'd get a bar chart with labels having this class structure:

<div class="highcharts-data-labels highcharts-series-0 highcharts-bar-series highcharts-color-0 " 
    <div class="highcharts-label highcharts-data-label highcharts-data-label-color-0 highcharts-tracker" 

But after switching to v6.0.3 I see

<div class="highcharts-data-labels highcharts-series-0 highcharts-bar-series highcharts-color-0 " 
    <div class="highcharts-data-labels highcharts-series-0 highcharts-bar-series highcharts-color-0 highcharts-tracker" 

Seems like the inner <div> is now just copying the classes from the outer div, and adding "highcharts-tracker"

barryp commented Nov 22, 2017

I see this too, with v5.0.12 I'd get a bar chart with labels having this class structure:

<div class="highcharts-data-labels highcharts-series-0 highcharts-bar-series highcharts-color-0 " 
    <div class="highcharts-label highcharts-data-label highcharts-data-label-color-0 highcharts-tracker" 

But after switching to v6.0.3 I see

<div class="highcharts-data-labels highcharts-series-0 highcharts-bar-series highcharts-color-0 " 
    <div class="highcharts-data-labels highcharts-series-0 highcharts-bar-series highcharts-color-0 highcharts-tracker" 

Seems like the inner <div> is now just copying the classes from the outer div, and adding "highcharts-tracker"

@barryp

This comment has been minimized.

Show comment
Hide comment
@barryp

barryp Nov 22, 2017

I made two jsfiddles with simplified versions of what I'm seeing in my site, check the console output to see the difference between the classes applied to the divs.

I also used some CSS to show the ".highcharts-data-label span" in red, which you see in 5.0.12 but not 6.0.3

v5.0.12: https://jsfiddle.net/qgukvxbm/2/
v6.0.3: https://jsfiddle.net/nyymrug4/2/

barryp commented Nov 22, 2017

I made two jsfiddles with simplified versions of what I'm seeing in my site, check the console output to see the difference between the classes applied to the divs.

I also used some CSS to show the ".highcharts-data-label span" in red, which you see in 5.0.12 but not 6.0.3

v5.0.12: https://jsfiddle.net/qgukvxbm/2/
v6.0.3: https://jsfiddle.net/nyymrug4/2/

@KacperMadej

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Nov 24, 2017

Contributor

@barryp Thank you for the demos.

To sum it up: the last dataLabel div has wrong wrong classes - copied from parent. Compare with other dataLabels to confirm or visually - the last label is not red.
Current (6.0.3) - wrong: https://jsfiddle.net/BlackLabel/nyymrug4/3/
Last working (5.0.12): https://jsfiddle.net/BlackLabel/qgukvxbm/3/

Offending commit: 71c360e

Contributor

KacperMadej commented Nov 24, 2017

@barryp Thank you for the demos.

To sum it up: the last dataLabel div has wrong wrong classes - copied from parent. Compare with other dataLabels to confirm or visually - the last label is not red.
Current (6.0.3) - wrong: https://jsfiddle.net/BlackLabel/nyymrug4/3/
Last working (5.0.12): https://jsfiddle.net/BlackLabel/qgukvxbm/3/

Offending commit: 71c360e

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