Hi vitorio,
this is a common issue with charting libraries that measure their container during initialization. If the chart is created while its parent tab is hidden (display: none or width = 0), jqxChart caches incorrect dimensions and doesn’t automatically recalculate when the tab becomes visible.
In Vue, the most reliable production approach is:
Delay rendering the chart until the tab becomes active (v-if instead of v-show when practical).
If the chart must remain mounted, watch the active tab and call the chart’s refresh/update method after the tab becomes visible.
Wait for Vue to finish rendering before refreshing:
watch(activeTab, async (tab) => {
if (tab === 'charts') {
await nextTick();
chartRef.value?.refresh(); // or update(), depending on your setup
}
});
If the layout can change after data updates or window resizing, attach a ResizeObserver to the chart container and trigger a refresh whenever its dimensions change.
In production, using ResizeObserver together with nextTick() after tab activation has proven to be the most robust solution. It ensures the chart is only recalculated once the container has a valid size, avoiding inconsistent rendering after data updates.
Regards,
Peter
