Charts display and

[sonicvizParticipant]

Hi,
In WordPress using theme 2013 charts display fine. All is ok.

Now I changed to 2016 theme and this element <td id=”tdLeft”></td> is suddenly 316 pixels wide causing the charts to be pushed right off screen.
Any idea of what I can do about it?

Edit:
I changed to renderEngine: ‘HTML5’, and they display properly.
It looks like it was defaulting to svg and when in svg the tdleft gets resized pushing the charts left.

I’d still like to know why as I’m not sure of the difference in browser capabilities between HTML5 and default svg

The full chart code is below. I’d upload an image but it doesn’t look like you can add images to posts.

<div id="chartContainer" style="width: 95%; height: 400px; cursor: default;"><table id="tblChart" cellspacing="0" cellpadding="0" border="0" align="left" valign="top"><tbody><tr><td colspan="2" id="tdTop"></td></tr><tr><td id="tdLeft"></td><td><div class="chartContainer" style="position: relative; width: 676px; height: 400px;" onselectstart="return false;"><svg id="svgChart" version="1.1" width="100%" height="100%" overflow="hidden"><defs><clipPath id="cl1452233490965_1"><rect x="1" y="1" width="675" height="399" fill="none"></rect></clipPath><clipPath id="cl1452233490965_2"><rect x="89" y="-1" width="587" height="21" fill="none"></rect></clipPath><clipPath id="cl1452233490965_3"><rect x="89" y="18" width="587" height="17" fill="none"></rect></clipPath><clipPath id="cl1452233490965_4"><rect x="1" y="43" width="16" height="310" fill="none"></rect></clipPath><clipPath id="cl1452233490965_5"><rect x="47" y="44" width="630" height="307.5" fill="none"></rect></clipPath></defs><g clip-path="url(http://localhost:100/wordpress/index.php/bytaa-weight-tracker/#cl1452233490965_1)"><rect x="1.5" y="1.5" width="673" height="397" fill="#FFFFFF" stroke-width="1" stroke="#BCBCBC"></rect><g clip-path="url(http://localhost:100/wordpress/index.php/bytaa-weight-tracker/#cl1452233490965_2)"><text class="jqx-chart-title-text" cursor="default" x="355" y="15" width="56" height="11">Weight</text></g><g clip-path="url(http://localhost:100/wordpress/index.php/bytaa-weight-tracker/#cl1452233490965_3)"><text class="jqx-chart-title-description" cursor="default" x="342" y="31" width="81" height="9">Weight in kgs</text></g><text class="jqx-chart-axis-text" cursor="default" x="19" y="367" width="60" height="8">1-Jul-2015</text><text class="jqx-chart-axis-text" cursor="default" x="534" y="367" width="74" height="8">30-Aug-2015</text><line x1="49.5" y1="351.5" x2="676.5" y2="351.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><g><rect x="277.5" y="381.5" width="10" height="10" fill="#287CDF" fill-opacity="1" stroke="#2576D5" stroke-width="1" stroke-opacity="1"></rect><text class="jqx-chart-legend-text" cursor="default" x="293" y="391" width="37" height="8">Target</text></g><g><rect x="344.5" y="381.5" width="10" height="10" fill="#AF413E" fill-opacity="1" stroke="#A4403D" stroke-width="1" stroke-opacity="1"></rect><text class="jqx-chart-legend-text" cursor="default" x="360" y="391" width="39" height="8">Weight</text></g><g clip-path="url(http://localhost:100/wordpress/index.php/bytaa-weight-tracker/#cl1452233490965_4)"><g transform="translate(13,237)"><g transform="rotate(-90)"><text class="jqx-chart-axis-description" cursor="default" x="0" y="0" width="77" height="8">Weight in kgs</text></g></g></g><text class="jqx-chart-axis-text" cursor="default" x="18" y="48" width="25" height="8">81.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="70" width="25" height="8">80.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="92" width="25" height="8">79.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="114" width="25" height="8">78.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="136" width="25" height="8">77.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="158" width="25" height="8">76.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="180" width="25" height="8">75.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="202" width="25" height="8">74.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="224" width="25" height="8">73.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="246" width="25" height="8">72.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="268" width="25" height="8">71.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="290" width="25" height="8">70.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="312" width="25" height="8">69.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="334" width="25" height="8">68.0</text><text class="jqx-chart-axis-text" cursor="default" x="18" y="356" width="25" height="8">67.0</text><line x1="49.5" y1="44" x2="49.5" y2="351.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="351.5" x2="45" y2="351.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="329.5" x2="45" y2="329.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="307.5" x2="45" y2="307.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="285.5" x2="45" y2="285.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="263.5" x2="45" y2="263.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="241.5" x2="45" y2="241.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="219.5" x2="45" y2="219.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="197.5" x2="45" y2="197.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="175.5" x2="45" y2="175.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="153.5" x2="45" y2="153.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="131.5" x2="45" y2="131.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="109.5" x2="45" y2="109.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="87.5" x2="45" y2="87.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="65.5" x2="45" y2="65.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49" y1="43.5" x2="45" y2="43.5" stroke="#BCBCBC" stroke-width="1" stroke-dasharray=""></line><line x1="49.5" y1="351.5" x2="49.5" y2="355.5" stroke="#888888" stroke-width="1" stroke-dasharray=""></line><line x1="570.5" y1="351.5" x2="570.5" y2="355.5" stroke="#888888" stroke-width="1" stroke-dasharray=""></line><g clip-path="url(http://localhost:100/wordpress/index.php/bytaa-weight-tracker/#cl1452233490965_5)"><path d="M 50.5,79.5 L 50.5,79.5 50.5,79.5 135.5,94.5 188.5,89.5 196.5,89.5 240.5,69.5 257.5,79.5 266.5,69.5 283.5,89.5 405.5,94.5 457.5,89.5 466.5,89.5 509.5,69.5 527.5,79.5 535.5,69.5 553.5,89.5 640.5,179.5 648.5,278.5 675.5,129.5" stroke-width="3" stroke="#A4403D" stroke-opacity="1" fill-opacity="1" stroke-dasharray="" fill="none"></path></g></g></svg></div></td></tr></tbody></table></div>

[DimitarParticipant]

Hi sonicviz,

Maybe the 2016 theme applies custom CSS to td elements? You can try overriding it with your own CSS or use the solution you have already found – renderEngine: 'HTML5' (which makes use of the HTML canvas and does not create a structure like the one you posted).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts