Graph disappears when changing data from another tab

[muehling]

See following example (tested in Firefox): https://codesandbox.io/embed/oqvljo2lvz

Altering the data underlying the timeseries works as expected when using the "delete" button in the graph tab. When using the delete button in the button tab and then switching back to the graph tab make the graph disappear, however. Clicking the delete button in the graph tab will then make it reappear... Am I doing something wrong?

[muehling]

Updated all the libs and simplified the example: https://codesandbox.io/embed/64rj6ymp13

So far, my attempts at workarounds (forcing redraws) have failed.

[junedchhipa]

Sorry for the late response @muehling When I checked the example, the changing of the tabs didn't make the graph disappear. It was only when I clicked the buttons below the chart.

I suspect there is some issue while upddating chart series. I suggest you update the series as specified in the README

this.series = [{
   data: [...]
}]

[muehling]

Thanks for looking into it - the behavior you're observing is the one you're meant to observe.

Switching tabs is not a problem. Clicking the delete button below the graph is also not a problem. Clicking the delete button on the other tab is a problem, as it makes the graph in disappear when switching back the tab.

Both buttons have the same @click handler: series[0].data.splice(0, 1)

For what it's worth, the following two click handlers show the exact same behavior:

1. series[0] = {data: series[0].data.splice(0, 1)}
2. series = [{data: series[0].data.splice(0, 1)}]

[muehling]

Just stumbled upon another thing: You can simply change the window size when the Button tab is active and the graph will also disappear. So it's probably not related to a change in the series, it maybe a simple issue of causing a redraw when the graph is currently not visible or something...

[junedchhipa]

Thanks for the additional info @muehling I have fixed a similar bug previously (for bootstrap tabs). Nonetheless, I will take a look again.

[muehling]

Seems to have disappeared by now, using the latest versions of vue, bootstrap-vue and vue-apexcharts

[knox31085]

It seems that this problem still exists. I use some apexcharts within bootstrap tabs which lead to a disappearance of the chart if the data was changed while the tab is not visible. Maybe the size is 0 which leads to a failed draw call?

I use react with apexcharts in the version 3.15.5.

I think that this problem is related to the main apexcharts lib. Should this ticket be duplicated there or should it be handled here?

[diego-lima]

Just stumbled upon this problem myself while using plain ApexCharts v3.18.0. This issue is the only place I found anything related, and it seems the problem is not yet solved?

edit: found a workaround

according to the docs on updateOptions, the boolean parameter redrawPaths causes the chart to fully re-render if set to True:

When the chart is re-rendered, should it draw from the existing paths or completely redraw the chart paths from the beginning.

Also, since:

The new config object is merged with the existing config object preserving the existing configuration

All I had to do was to call updateOptions on an empty object with redrawPaths set to true as soon as the user clicks on the tab in which the chart is being displayed:

$("#mycharttab").click(function(){
    mychart.updateOptions({}, true);
})

More info about the problem

On my project, I have two tabs with an Apexchart instance on each. The first chart's tab is active by default. As the page opens, both charts render normally as I switch tabs.

When the user updates the time range desired, I call on updateSeries on both charts to change the series being displayed. The chart currently active updates flawlessly, but if I switch tabs, the (previously inactive) chart is blank.

To summarize:

• instantiate two charts in two tabs
• call updateSeries on both charts to set the initial data, they render just fine
• call updateSeries again because the time range changed, only the currently active chart renders just fine. The inactive chart becomes blank

[vibexpro]

Hi I'm using react apexchart library and have the same issue. Does anyone know a fix?

[Jimmylet]

Same problem here

EDIT :

When you resize the browser window, the graph appears to reset. It then displays correctly. So, we can simulate an event that resizes the window in javascript.

When I change tabs, I issue this command:

let resizeEvent = window.document.createEvent('UIEvents');
resizeEvent.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(resizeEvent);

Or shorter, but not compatible with internet explorer :

window.dispatchEvent(new Event('resize'));

It's a hack, but it works well.

[kiryl-bahdanovich]

Are there any updates on that issue? I also getting charts disappear using them along with bootstrap and tabs/pages. They work again when user changes the browser screen size.

[knox31085]

The problem still exists. It seems that this is not related to the framework which is used. I use react.

As simple workaround you could reload the relevant components on a change of the tab. At least this works for me...

I think that this ticket should be reopened until it is really fixed.

[miaohf]

Are there any updates on that issue? I also getting charts disappear using them along with bootstrap and tabs/pages. They work again when user changes the browser screen size.

[yousef-alsalem]

This issue came back again, but for me it's with Area charts only. I have 2 area charts and 2 tabs, I dragged the first one in a tab, then dragged the other one in the second tab. when I returned to the first one I don't see it. That issue was not happing 10 days ago, so, I think it's because a recent update.