Chart sizes in tabs

1
I recently moved the charts in an app to the newer versions from Mendix. https://marketplace.mendix.com/link/component/105695   These are much better in many respects, but I have now got an issue with how they display when added to tabs on a page. The legacy charts did not have this problem. I set my charts to be 100% width and 40% height. If I show them on separate pages, they show at this size. However if they are put on tabs on a page, the first tab shows correctly, but the others show much smaller (not 100% width). If I resize the browser window, they resize correctly. Similarly, if I set all tabs to “Refresh on show”, they resize correctly too. Using “Refresh on show” is not desirable though, because the chart is refreshed, so any filters I may have set will be cleared.   Is there a way to get all charts to show at the correct size on multiple tab pages, without refreshing them?
asked
1 answers
0

I had the same issue and my solution was to add a DataView with a "TabHelperNP" entity with member "TabIndex" around the tabcontainer. This entity is then referenced for the tabcontainer "attribute" you can find in the tabcontainer settings which will always contain the current index of the tab selected starting by 1. 

 

I also added an OnChange nanoflow with the TabHelperNP parameter to the tabcontainer which based on the TabIndex (for the tabs including charts) is executing a Javascript to resize the pltotly chart. 

 

With this it always resize and looks as it should.

 

The user code for the JS is:

 

document.querySelectorAll(".js-plotly-plot").forEach(chart => {

if (chart.offsetParent !== null && typeof Plotly !== "undefined") {

Plotly.Plots.resize(chart);

}

});

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

answered