Width

Hey vandsimy I’m glad you like the plugin.

I’d need to see the specific case where this is happening to figure out what might be happening.

There’s nothing in particular in the code that should ever be limiting the width to 600px when a chart is embedded in a post and I’ve actually never seen this issue crop up before.

Hello methnen!

I’m really sorry for the late reply.

Here’s a link to the page where i had this problem.

https://bit.ly/2wCH9TY

Thank you very much!

Hey,

Sorry again for the delay. Life has been busy. Looking at that page I’m pretty sure the div that the chart is inside of is not a full width div which is why you aren’t getting a full width chart.

You’ll notice if you make the browser window small enough the chart is acting responsively.

Hello!

Thanks for checking it out and its not a full width, its a 3/4 width
I’ve added the same chart under it which is full width and it does the same thing.

I’m using wpbakery visual composer if this helps to understand the problem better

On first load it just looks like its stuck in a certain width, but when i resize the browser window, it takes the correct dimensions.

Thanks again!

OK, this is a weird one and I can’t duplicate it outside of your specific theme.

After looking at it for a bit I think what’s happening is that theme isn’t finished rendering until AFTER the Highcharts code has started rendering the charts. That means Highcharts is doing it’s thing before it knows the width of the containing div.

This isn’t the prettiest solution but probably the simplest fix would be to run the Highcharts reflow function on any charts in the page after small timeout (whatever is enough to give the them time to finish rendering).

Something along these lines SHOULD work:

var m_chart_refresh = {};

(function( $ ) {
	'use strict';

	m_chart_refresh.init = function() {
		setTimeout(function() {
			m_chart_refresh.reflow_charts();
		}, 500 );
	};

	m_chart_refresh.reflow_charts = function() {
		$( '.m-chart' ).each(function() {
			$(this).highcharts().reflow();
		});
	};

	$( function() {
		m_chart_refresh.init();
	} );
})( jQuery );

Obviously you’d want to adjust the timeout to be as small as possible while still reliably kicking in AFTER the theme has finished rendering.

Hello methnen,

Wow thats actually incredible! It worked!

Thank you a lot!

It works fine now!