Using AnyChart and Column Chart together in Tab Container causes UI bug
0
I am using AnyChart and Column Chart inside tab containers. I have a side-by-side layout grid. The UI looks good on the first tab but when I switch to the second tab, the column chart goes out of its layout grid. Then, if I change the windows size of my browser, it will go back to normal. The tabs are refreshed on show. Is there a way to solve this issue? Or loads the charts after other elements are loaded.
asked
Chen Yongyan
1 answers
0
Hi Chen Yongyan
Let’s address this step by step:
Delayed Chart Loading:
One approach is to load the charts after other elements on the page have finished rendering. You can achieve this by using a dataviewloader widget for the larger charts. The dataviewloader ensures that the page loads first, and then the charts load afterward. You can even style a spinner to show progress during chart loading1.
Tab Refresh Behavior:
Since the tabs are refreshed on show, consider using the onShow event of the tab container to trigger the chart rendering. This way, the chart will be loaded only when the user navigates to the specific tab containing the chart.
In your onShow microflow or nanoflow, initialize the chart and draw it. This should prevent layout issues caused by the initial rendering of hidden tabs.
Responsive Layout:
Ensure that your layout grid and chart are responsive. Set appropriate width and height properties for the chart container. You might need to adjust these based on the available space within the tab container.
Additionally, consider using CSS classes to style the chart container and handle any specific layout requirements.
Remember to test these solutions thoroughly to ensure they work seamlessly across different scenarios.