How to autoscale charts?

[sonicvizParticipant]

Hi,
Can you set charts to allow them to autoscale to different window sizes, from desktop to mobile?

I tried <div id=’jqxChart’ style=”width: 100%; height: 100%;”> but it does not seem to work as the chart stays a fixed width when the browser drops below a certain size, which cuts off and isn’t a great UX.

[sonicvizParticipant]

Charts are displaying inside a JQXTab widget set to 100%.
When I resize the browser or use mobile emulation mode the tab widget resizes correctly on the fly but the embedded chart does not.

Very frustrating!

[sonicvizParticipant]

Perhaps this is a bug?

To show the width has to be less than 100%

I got it to work with the following
$html .= “<div id=\”chartContainer3\” style=\”width:95%; height:400px\”></div>”;

but if I set either to 100% it doesn’t show at all

[HristoParticipant]

Hello sonicviz,

Could you provide us example. (https://www.jseditor.io/ or http://jsfiddle.net/)
Would you like to write if there are some error message in console.
Please take a look this demo:
http://www.jqwidgets.com/jquery-widgets-demo/mobiledemos/jqxchart/javascript_chart_areaspline_series.htm?(arctic)&=fullscreen
(this is from mobile track)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[sonicvizParticipant]

Hi Hristo,
Example is hard as the code is part of a wordpress plugin so it’s a mixed php/js flow.
Chart definitely does not show at 100% though, only at < 100%

[HristoParticipant]

Hello sonicviz,

Could you try to set this settings:

<style>
   html, body {
      width: 100%; height: 100%; overflow: hidden; padding: 0; margin: 0;
   }
</style>

Please take a look this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_fluid_size.htm?arctic
If you still have same issue please try to provide us an example which demonstrate this.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts