arch
Posts: 9
Joined: Mon Aug 23, 2021 10:58 pm

Rendering highcharts using multiple paths

Hi, I am using highcharts (linegraph). Its displayed by navigating through 2 different routes. When I use window.location.replace(url) , the chart's labels, height gets smaller. However, when I refresh the page or switch tabs everything looks fine. I checked the container CSS and it looks fine to me. I tried setting the reflow to true, that did not help.

Can you help me figure out what the issue could be?

Thank you!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Rendering highcharts using multiple paths

Hi arch,

Thanks for contacting us with your issue.

Could you try to create a simplified live demo with that issue? You can start here: https://jsfiddle.net/BlackLabel/g96kt8jo/24/
In case of any problems with that let me know and I will try to figure it out in a different way.

Regards!
Mateusz Bernacik
Highcharts Developer
arch
Posts: 9
Joined: Mon Aug 23, 2021 10:58 pm

Re: Rendering highcharts using multiple paths

Thanks for replying!
I mean something like this:
Highcharts.chart('container', {
series: [{
data: [1, 20, 30, 40]
}]
})
document.getElementById('button').addEventListener('click', e => {
console.log("---> clicked");
window.location.replace('https://jsfiddle.net/BlackLabel/g96kt8jo/24/');
});

The highchart loads with reduced width/height and on any activity (page refresh or tab click loads correctly). I am not sure how to go about it. Thanks in advance!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Rendering highcharts using multiple paths

Hi arch,

Please try to call chart.reflow() method after window.location.replace. If chart doesn't have fixed height and width and still doesn't fill its container then calling this method should help.

Let me know if it works.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”