Line visible for line chart when zoomed in on data gap

[randomuseraccount]

Expected behaviour

When zoomed in, with navigator, on a gap of the chart in a line chart, no line should be visible in the chart area.

Actual behaviour

When zoomed in, with navigator, on a gap of the chart in a line chart, a line is visible in the chart area and it shouldn't be.

Live demo with steps to reproduce

http://jsfiddle.net/nLoovove/

1 - Run the fiddle;
2 - Zoom in, using the navigator, to the gapped area;
3 - The result will be as the following picture:

Product version

Highcharts 5.0.14

Affected browser(s)

Version 63.0.3239.84 (Official Build) (64-bit)

More information

This issue is the same as reported in #6645

However, with the workarounds proposed by the Highcharts team in that issue, new issues appear.

The first issue is, when we enable data groupping for a chart with a gap, a line is again drawn in the chart area, as can be seen in the following fiddle: http://jsfiddle.net/35cpfawz/
The steps to reproduce the issue in this fiddle are the following:

1 - Run the fiddle;
2 - Zoom in, using navigator to the gapped area of the chart;
3 - Click the "Enable data grouping" button;
4 - The result will be like the following picture:

The second issue, is that the chart disappears. It can be seen in the following fiddle: http://jsfiddle.net/a3aLawcy/
The steps to reproduce are:

1 - Run the fiddle;
2 - Zoom in to some area, as in the following picture:

3 - Click the "Enable data grouping" button;
4 - Zoom out again, using the navigator, as in the following picture were the issue is also visible:

this second issue was also discussed here https://forum.highcharts.com/highstock-usage/line-chart-disappears-after-data-groupping-on-zoom-t40052/

Thank you

[pawelfus]

Hi @mynameiswhat1

Thank you for reporting all of the issues!

In other words, we have three issues here:

• duplicate of Line visible for line chart with navigator when no values #6645 - already fixed since 5.0.13 by a new option gapSize
• visible line with enabled dataGrouping: This one is caused by setting gapUnit: 'value' + gapSize: 1. In this case, gapSize will be set to one millisecond, which is certainly not what we need. Setting gapSize e.g. to one hour works fine: http://jsfiddle.net/35cpfawz/1/ (note: I removed workaround-wrapper because it's already implemented in v5.0.14)
• invisible line with enabled dataGrouping: It's the same issue as above, wrong value for gapSize for this particular data. Setting again to one hour and we have nice result: http://jsfiddle.net/a3aLawcy/1/

Let me know if this resolves your issues.

[randomuseraccount]

Hello @pawelfus ,

Can you please specify how the issue in http://jsfiddle.net/nLoovove/ is fixed by the gapSize option? if you notice, that option is already in use in the fiddle.

Thank you.

[pawelfus]

My apologies, I mean gapUnit-option of course. Setting gapUnit to 'value' resolves the issue: http://jsfiddle.net/nLoovove/1/ (demo with 1hour gapSize).

[randomuseraccount]

Hello @pawelfus ,
Yes, it is clear now. It resolves our issues.
Thank you very much for your help.

[pawelfus]

Thanks! Closing issue then.

[randomuseraccount]

Hello @pawelfus ,
Can the gapSize and gapUnit be set for each individual series? Or they can only be set chart wise, for all the series that are in the chart?

[randomuseraccount]

Just tested, and I believe it does:

http://jsfiddle.net/m9z0g6ss/

Thank you.

[pawelfus]

You are right, it can be set like other options as plotOptions.series.gapSize, plotOptions.<seriestype>.gapSize or series: [{ gapSize: ... }].

[randomuseraccount]

Hello @pawelfus ,
Can you please specify why in the following statements:

visible line with enabled dataGrouping: This one is caused by setting gapUnit: 'value' + gapSize: 1. In this case, gapSize will be set to one millisecond, which is certainly not what we need. Setting gapSize e.g. to one hour works fine: http://jsfiddle.net/35cpfawz/1/ (note: I removed workaround-wrapper because it's already implemented in v5.0.14)

invisible line with enabled dataGrouping: It's the same issue as above, wrong value for gapSize for this particular data. Setting again to one hour and we have nice result: http://jsfiddle.net/a3aLawcy/1/

do we need to choose an hour as the gapSize? This makes no sense, if I have a data sampling of 1 minute, I wish to see gaps when no data is present for more than that interval. And when I do it, I start getting issues as such:

http://jsfiddle.net/fdcrvLrq/

As discussed in #7686

[pawelfus]

I just used 1hour an example, it was just a guess what gapSize you may need. If you say 1minute gapSize is the one you want, then you should use it - you know the best what data you want to display.

[randomuseraccount]

Yes, the problem is that, when I do it, strange behaviours happen, has the one described before. But maybe we can take this discussion to #7686.
Thank you.