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

Area chart point displayed outside filled stack #6387

Closed
valentin-radulescu-hs opened this Issue Feb 20, 2017 · 4 comments

Comments

Projects
None yet
2 participants
@valentin-radulescu-hs

valentin-radulescu-hs commented Feb 20, 2017

Expected behaviour

4.1.6 Points and areas are stacked correctly.

screen shot 2017-02-20 at 13 09 17

Actual behaviour

5.0.7 The point is rendered at the correct location but the actual filled area is less that it should be, lines and fills don't match up. The problem seems to be related to having multiple null points inside a chart.

screen shot 2017-02-20 at 13 08 52

The series enable animation is also affected by this and displays artifacts.

highcharts-artifact

Live demo with steps to reproduce

jsFiddle demo - change the script src to https://code.highcharts.com/4.1.6/highcharts.js in order to compare with the expected behaviour.

Affected browser(s)

Chrome 56
Firefox 51
... possibly others

@valentin-radulescu-hs valentin-radulescu-hs changed the title from Areaspline chart point displayed outside stack to Area chart point displayed outside filled stack Feb 20, 2017

@valentin-radulescu-hs

This comment has been minimized.

Show comment
Hide comment
@valentin-radulescu-hs

valentin-radulescu-hs Feb 20, 2017

Is there any workaround for this problem at the moment? I'm trying to upgrade from 4.1.6 to 5 but this is a deal breaker for me as a lot of my charts can/will have null points.

valentin-radulescu-hs commented Feb 20, 2017

Is there any workaround for this problem at the moment? I'm trying to upgrade from 4.1.6 to 5 but this is a deal breaker for me as a lot of my charts can/will have null points.

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Feb 20, 2017

Collaborator

Actually the stacking part is correct, but the rendering of the graph is not.

The thing with 4.1.6 was that stacking on spline series was not supported at all, so it would be the same as disabling it: https://jsfiddle.net/highcharts/vhm2Lvex/3/.

Now take a look at the area chart, where stacking performs as expected: https://jsfiddle.net/highcharts/vhm2Lvex/4/. The bottom series only has one value, 2, but since it is only one point, it doesn't have an area below it. However, when we stack the number 1 on top of it, it becomes 3, but there's still no area below it, so the stack becomes disconnected from the points. It becomes clearer what happens if we add another set of points: https://jsfiddle.net/highcharts/vhm2Lvex/5/.

Collaborator

TorsteinHonsi commented Feb 20, 2017

Actually the stacking part is correct, but the rendering of the graph is not.

The thing with 4.1.6 was that stacking on spline series was not supported at all, so it would be the same as disabling it: https://jsfiddle.net/highcharts/vhm2Lvex/3/.

Now take a look at the area chart, where stacking performs as expected: https://jsfiddle.net/highcharts/vhm2Lvex/4/. The bottom series only has one value, 2, but since it is only one point, it doesn't have an area below it. However, when we stack the number 1 on top of it, it becomes 3, but there's still no area below it, so the stack becomes disconnected from the points. It becomes clearer what happens if we add another set of points: https://jsfiddle.net/highcharts/vhm2Lvex/5/.

@TorsteinHonsi TorsteinHonsi added the Bug label Feb 20, 2017

@valentin-radulescu-hs

This comment has been minimized.

Show comment
Hide comment
@valentin-radulescu-hs

valentin-radulescu-hs Feb 20, 2017

@TorsteinHonsi Ok, so it seems that stacking worked even in 4.1.6, tested here https://jsfiddle.net/valentin/4aeror48/. Maybe it wasn't intended?

Either way I'd like to know what can be done to fix this problem and get the rendering sorted as it's preventing me from upgrading. Do you have any idea on what caused this bug to show up? It kinda looks like a regression from my point of view.
If it's an easy fix, I'm willing to give it a shot and submit a PR provided you can point me in the right direction. Thanks!

valentin-radulescu-hs commented Feb 20, 2017

@TorsteinHonsi Ok, so it seems that stacking worked even in 4.1.6, tested here https://jsfiddle.net/valentin/4aeror48/. Maybe it wasn't intended?

Either way I'd like to know what can be done to fix this problem and get the rendering sorted as it's preventing me from upgrading. Do you have any idea on what caused this bug to show up? It kinda looks like a regression from my point of view.
If it's an easy fix, I'm willing to give it a shot and submit a PR provided you can point me in the right direction. Thanks!

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Feb 20, 2017

Collaborator

Ok, so it seems that stacking worked even in 4.1.6, tested here https://jsfiddle.net/valentin/4aeror48/. Maybe it wasn't intended?

Yes, sorry for being unclear about this earlier. It worked by not trying to stack the areas, but instead just draw them on top of each other. So in that fiddle, you'll see that in the area that is supposed to be orange, there is actually some blue bleeding through.

The problem happens on the ends of some of the area splines, but only when nulls are present: https://jsfiddle.net/highcharts/4aeror48/2/. If you want to debug, I would start looking in the getPointSpline function.

Collaborator

TorsteinHonsi commented Feb 20, 2017

Ok, so it seems that stacking worked even in 4.1.6, tested here https://jsfiddle.net/valentin/4aeror48/. Maybe it wasn't intended?

Yes, sorry for being unclear about this earlier. It worked by not trying to stack the areas, but instead just draw them on top of each other. So in that fiddle, you'll see that in the area that is supposed to be orange, there is actually some blue bleeding through.

The problem happens on the ends of some of the area splines, but only when nulls are present: https://jsfiddle.net/highcharts/4aeror48/2/. If you want to debug, I would start looking in the getPointSpline function.

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