Area chart point displayed outside filled stack

[valentin-radulescu-hs]

Expected behaviour

4.1.6 Points and areas are stacked correctly.

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.

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

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]

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]

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]

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]

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/.

[valentin-radulescu-hs]

@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]

@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]

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.

[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?

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.