point markers disappearing after series data update

[r-rosendal]

I have a line chart with points, where some of the points have markers. The chart data is updated and chart is redrawn every 5 minutes with the use of ajax setTimeout.

Since monday I have had an issue, where the markers on the line will show correctly the first time the chart is drawn after loading the site, but after 5 minutes when it's updated, the markers disappear, and will only show when mousing over where they would have been.

The markers seems to disappear after calling

Code: Select all

chart.series[2].update({ data: somedata }, false);

I have a couple of identical charts on the page and it's the same for all of them regardles of the amount of ticks.

The site and charts have been working correctly up until now.

[rafalS]

Hi r-rosendal,

Welcome to our forum and thank you for contacting us with your issue.

Can you reproduce this issue online (jsFiddle would be perfect) so I can investigate/debug this?

Best regards!

edit: I created this demo: https://jsfiddle.net/BlackLabel/jnsgp3wq
The data is updating and markers don't disappear, but you should let the chart redraw after every update. (uncomment line 17)
Furthermore, if you want to only update the data, it is better to use series.setData() method.

API Reference: https://api.highcharts.com/class-refere ... art#update
https://api.highcharts.com/class-refere ... es#setData

[kdanna]

hi r-rosendal,

I am wondering if you have found a solution to this problem? The exact same thing is happening in our application. Thanks!

[r-rosendal]

Never found the source of the problem as such, but specifying version 7.0.3 when requesting from the CDN made it go away. I guess it's related to the update released in the beginning of April.

[rafalS]

I'd like to help both of you, but I need an online jsFiddle showing this problem because I can't reproduce it on my own.

[GMihalkov]

Steps to reproduce:
1. Hide both Others and Client1 from the chart by clicking on their legend icons at the bottom of the chart.
2. Click on Client1's legend icon to display it again.
3. Click on Client1's legend icon to hide it.
4. Click on Others's legend icon and observe the problem.

Let me know of sometghing is not clear in the steps. I can provide pictures if needed.

Thank you!

https://jsfiddle.net/tx09ckya/1/

[mateuszkornecki]

Hi,

It is happening because in that case, you are setting data for "others" series with an empty array - it means that you are deleting its data.
Could you tell me what do you want to achieve in your project, so I could help you to find a different solution?

Feel free to ask any further questions!

Kind regards.

[GMihalkov]

Hi,

It is happening because in that case, you are setting "others" series with an empty array - it means that you are deleting its data.
Could you tell me what do you want to achieve in your project, so I could help you to find a different solution?

Feel free to ask any further questions!

Kind regards.

(Keep the steps in the exact order please)

1. Hide both Others and Client1 from the chart by clicking on their legend icons at the bottom of the chart.
(Keep the steps in the exact order please)
- Hide Client1 first
- Hide Others next
2. Click on Client1's legend icon to display it again.
3. Click on Client1's legend icon to hide it.
4. Click on Others's legend icon and observe the problem.

If you debug step 2 closely you will see that we provide a full array for the setData() function. And the the others data converts to an empty array.

Updated fiddle: https://jsfiddle.net/5rcLnfwu/4/

Desired functionality: Dynamically adding and subtracting the Client1 value to/from the Others client.

Thank you.

[mateuszkornecki]

Thanks for the detailed explanation.

I have found the source of the problem. series.data in some cases don't contain information about your data, for example after grouping the data, or sometimes when the data is not visible. After triggering the first setData() on the hidden series the data is no longer available from series.data, but it is not deleted (it will be available again after unhiding the series). That's why after triggering second setData() you are overriding the series with empty data array so after that, there is no data at all. To work around the problem use series.options.data as a source for all operations. That's the place that contains all original config regardless of the visibility or grouping.
API references:
https://api.highcharts.com/class-refere ... rts.Series
Live demo:
https://jsfiddle.net/BlackLabel/6ywt7bLf/ (using series.data - a simplified demo that will show the problem)
https://jsfiddle.net/BlackLabel/y35wq8o1/ (using series.options.data - the workaround)
https://jsfiddle.net/BlackLabel/gr1k8swL/ (workaround applied to your demo)

Let me know if you have any further questions!

Regards.

[GMihalkov]

Thanks for the detailed explanation.

I have found the source of the problem. series.data in some cases don't contain information about your data, for example after grouping the data, or sometimes when the data is not visible. After triggering the first setData() on the hidden series the data is no longer available from series.data, but it is not deleted (it will be available again after unhiding the series). That's why after triggering second setData() you are overriding the series with empty data array so after that, there is no data at all. To work around the problem use series.options.data as a source for all operations. That's the place that contains all original config regardless of the visibility or grouping.
API references:
https://api.highcharts.com/class-refere ... rts.Series
Live demo:
https://jsfiddle.net/BlackLabel/6ywt7bLf/ (using series.data - a simplified demo that will show the problem)
https://jsfiddle.net/BlackLabel/y35wq8o1/ (using series.options.data - the workaround)
https://jsfiddle.net/BlackLabel/gr1k8swL/ (workaround applied to your demo)

Let me know if you have any further questions!

Regards.

That solved it ! Guess I've missed that.
Thank you for the quick response!

[mateuszkornecki]

You're welcome!

[niv123]

Hi,
I am facing the same issue, after using setData or update, I have tried both, but still, once I click a legend(to hide series), and then do setData/update on highchart, and then click the legend again(to show series), the chart does not get updated. (the series stay as hidden)
Kindly help. Stuck on this issue and tried everything of redrawing etc.

(What I observed was that the chart.series[0]. data was becoming an empty array for that particular series post setData/update for that particular series)

[sebastian.h]

Hi niv123,
Thanks for contacting us!

Please upload your basic demo and I'll take a look at it.

Best regards.

[niv123]

Hi sebastian,
https://jsfiddle.net/63pwL0vu/12/
Please refer this.
Steps:
1. first click on a legend , say Tokyo
2. click on y-axis label(x-axis label for stacked, eg Dec )
3. Again click on legend- Tokyo

Tokyo legend becomes visible(shows selected ), whereas the series do not get update.
Please note: Expected behaviour: the series should become visible again for Tokyo with the label staying selected - which is Dec

[niv123]

What I am observing is that after setData() method, the data becomes empty.
I have tried using update() as well, but the same issue persists.
Kindly help with this, you can suggest an alternative as well but this is the behaviour needed.
Thanks a lot in advance