Positions Of The Svg Element Are Calculated Incorrectly

rouven · July 10, 2012

Hi,

I'm trying to render (serverside) a chart with nodeJS (with jsDOM environment). It runs without Errors. I fetch the SVG via the export function, but all SVG Elements have a wrong position. (See Attachment).

FusionCharts.debugMode.enabled(true);
FusionCharts.debugMode.outputTo( function() { console.log(arguments); } );

var chartConfig = {
                   	"registerWithJS" : true,
                   	"marker": {"symbol": 'cirlce'},
                   	"renderAt" : "container",
                   	"showCheckbox": "0",
                   	"showToolTip": "0",
		"type": "MSBar2D",
                   	"animation": "0",
					"id": "testChart",
					"width": "860",
					"height": "300",
                   	"dataFormat": "json",
                   	"debugMode": true,
					"renderer": "javascript",
                   	"dataFormat": "json",
                   	"exportEnabled": '1',
                   	"forExport": "1"
};
var chartObj = new FusionCharts(chartConfig);

FusionCharts.addEventListener("Rendered", function()  {
chartObj.exportChart();
})

chartObj.setJSONData('{"chart":{"showToolTip": "0", "forExport": "1", "caption":"Headline","xaxisname":"","yaxisname":"Prozentwerte","showvalues":"0","numberprefix":"","decimals":"2","sdecimals":"2","forcedecimals":"0","decimalseparator":",","useroundedges":"1","connectNullData":"0","exportEnabled":"1","exportAtClient":"1","exportShowMenuItem":"0","html5ExportHandler":"/export/index.php"},"categories":[{"category":[{"label":"Mark1"},{"label":"Mark2"},{"label":"Mark3"}]}],"dataset":[{"seriesname":"Serie1", "animation": "0","showCheckbox": "0","data":[{"value":"5.3"},{"value":"43.4"},{"value":"18.1"}]},{"seriesname":"Serie2","animation": "0","showCheckbox": "0","data":[{"value":"93.4"},{"value":"8.2"},{"value":"20.1"}]},{"seriesname":"Serie3","animation": "0","showCheckbox": "0","data":[{"value":"1.2"},{"value":"4.3"},{"value":"58.4"}]}, {"seriesname":"Serie4","animation": "0","showCheckbox": "0", "data":[{"value":"0.1"},{"value":"44.1"},{"value":"3.3"}]}]}')
chartObj.render('container');

Generated SVG:

<svg xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="400"><defs><linearGradient id="highcharts-1" gradientUnits="objectBoundingBox" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="0%" stop-color="#AFD8F8" stop-opacity="1"></stop><stop offset="30%" stop-color="#AFD8F8" stop-opacity="1"></stop><stop offset="60%" stop-color="#dff0fc" stop-opacity="1"></stop><stop offset="90%" stop-color="#AFD8F8" stop-opacity="1"></stop><stop offset="100%" stop-color="#AFD8F8" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-2" gradientUnits="objectBoundingBox" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="0%" stop-color="#F6BD0F" stop-opacity="1"></stop><stop offset="30%" stop-color="#F6BD0F" stop-opacity="1"></stop><stop offset="60%" stop-color="#fce59f" stop-opacity="1"></stop><stop offset="90%" stop-color="#F6BD0F" stop-opacity="1"></stop><stop offset="100%" stop-color="#F6BD0F" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-3" gradientUnits="objectBoundingBox" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="0%" stop-color="#8BBA00" stop-opacity="1"></stop><stop offset="30%" stop-color="#8BBA00" stop-opacity="1"></stop><stop offset="60%" stop-color="#d1e499" stop-opacity="1"></stop><stop offset="90%" stop-color="#8BBA00" stop-opacity="1"></stop><stop offset="100%" stop-color="#8BBA00" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-4" gradientUnits="objectBoundingBox" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="0%" stop-color="#FF8E46" stop-opacity="1"></stop><stop offset="30%" stop-color="#FF8E46" stop-opacity="1"></stop><stop offset="60%" stop-color="#ffd2b5" stop-opacity="1"></stop><stop offset="90%" stop-color="#FF8E46" stop-opacity="1"></stop><stop offset="100%" stop-color="#FF8E46" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-5" gradientUnits="objectBoundingBox" x1="50%" y1="100%" x2="50%" y2="0%"><stop offset="0%" stop-color="#CBCBCB" stop-opacity="0.5"></stop><stop offset="100%" stop-color="#E9E9E9" stop-opacity="0.5"></stop></linearGradient><clipPath id="highcharts-6"><rect rx="0" ry="0" fill="none" x="1" y="1" width="598" height="398" stroke-width="0"></rect></clipPath><clipPath id="highcharts-7"><rect rx="0" ry="0" fill="none" x="0" y="-17" width="400" height="600" stroke-width="0"></rect></clipPath><linearGradient id="highcharts-8" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#83a2ba" stop-opacity="1"></stop><stop offset="10%" stop-color="#ebf6fe" stop-opacity="1"></stop><stop offset="23%" stop-color="#8cacc6" stop-opacity="1"></stop><stop offset="80%" stop-color="#cbe6fa" stop-opacity="1"></stop><stop offset="100%" stop-color="#8cacc6" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-9" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#83a2ba" stop-opacity="1"></stop><stop offset="10%" stop-color="#ebf6fe" stop-opacity="1"></stop><stop offset="23%" stop-color="#8cacc6" stop-opacity="1"></stop><stop offset="80%" stop-color="#cbe6fa" stop-opacity="1"></stop><stop offset="100%" stop-color="#8cacc6" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-10" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#83a2ba" stop-opacity="1"></stop><stop offset="10%" stop-color="#ebf6fe" stop-opacity="1"></stop><stop offset="23%" stop-color="#8cacc6" stop-opacity="1"></stop><stop offset="80%" stop-color="#cbe6fa" stop-opacity="1"></stop><stop offset="100%" stop-color="#8cacc6" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-11" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#b88d0b" stop-opacity="1"></stop><stop offset="10%" stop-color="#fdefc3" stop-opacity="1"></stop><stop offset="23%" stop-color="#c4970c" stop-opacity="1"></stop><stop offset="80%" stop-color="#f9d463" stop-opacity="1"></stop><stop offset="100%" stop-color="#c4970c" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-12" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#b88d0b" stop-opacity="1"></stop><stop offset="10%" stop-color="#fdefc3" stop-opacity="1"></stop><stop offset="23%" stop-color="#c4970c" stop-opacity="1"></stop><stop offset="80%" stop-color="#f9d463" stop-opacity="1"></stop><stop offset="100%" stop-color="#c4970c" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-13" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#b88d0b" stop-opacity="1"></stop><stop offset="10%" stop-color="#fdefc3" stop-opacity="1"></stop><stop offset="23%" stop-color="#c4970c" stop-opacity="1"></stop><stop offset="80%" stop-color="#f9d463" stop-opacity="1"></stop><stop offset="100%" stop-color="#c4970c" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-14" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#688b00" stop-opacity="1"></stop><stop offset="10%" stop-color="#e2eec0" stop-opacity="1"></stop><stop offset="23%" stop-color="#6f9400" stop-opacity="1"></stop><stop offset="80%" stop-color="#b3d259" stop-opacity="1"></stop><stop offset="100%" stop-color="#6f9400" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-15" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#688b00" stop-opacity="1"></stop><stop offset="10%" stop-color="#e2eec0" stop-opacity="1"></stop><stop offset="23%" stop-color="#6f9400" stop-opacity="1"></stop><stop offset="80%" stop-color="#b3d259" stop-opacity="1"></stop><stop offset="100%" stop-color="#6f9400" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-16" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#688b00" stop-opacity="1"></stop><stop offset="10%" stop-color="#e2eec0" stop-opacity="1"></stop><stop offset="23%" stop-color="#6f9400" stop-opacity="1"></stop><stop offset="80%" stop-color="#b3d259" stop-opacity="1"></stop><stop offset="100%" stop-color="#6f9400" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-17" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#bf6a34" stop-opacity="1"></stop><stop offset="10%" stop-color="#ffe3d1" stop-opacity="1"></stop><stop offset="23%" stop-color="#cc7138" stop-opacity="1"></stop><stop offset="80%" stop-color="#ffb587" stop-opacity="1"></stop><stop offset="100%" stop-color="#cc7138" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-18" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#bf6a34" stop-opacity="1"></stop><stop offset="10%" stop-color="#ffe3d1" stop-opacity="1"></stop><stop offset="23%" stop-color="#cc7138" stop-opacity="1"></stop><stop offset="80%" stop-color="#ffb587" stop-opacity="1"></stop><stop offset="100%" stop-color="#cc7138" stop-opacity="1"></stop></linearGradient><linearGradient id="highcharts-19" gradientUnits="objectBoundingBox" x1="100%" y1="50%" x2="0%" y2="50%"><stop offset="0%" stop-color="#bf6a34" stop-opacity="1"></stop><stop offset="10%" stop-color="#ffe3d1" stop-opacity="1"></stop><stop offset="23%" stop-color="#cc7138" stop-opacity="1"></stop><stop offset="80%" stop-color="#ffb587" stop-opacity="1"></stop><stop offset="100%" stop-color="#cc7138" stop-opacity="1"></stop></linearGradient></defs><g class="highcharts-tracker" zindex="9" transform="translate(585,NaN) rotate(90) scale(-1,1)" width="568" height="NaN"><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="537" width="1" height="31" stroke-width="0" istracker="1341906831960" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="321" width="1" height="247" stroke-width="0" istracker="1341906831960" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="465" width="1" height="103" stroke-width="0" istracker="1341906831960" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="37" width="1" height="531" stroke-width="0" istracker="1341906831999" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="521" width="1" height="47" stroke-width="0" istracker="1341906831999" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="453" width="1" height="115" stroke-width="0" istracker="1341906831999" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="561" width="1" height="7" stroke-width="0" istracker="1341906832032" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="543" width="1" height="25" stroke-width="0" istracker="1341906832032" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="236" width="1" height="332" stroke-width="0" istracker="1341906832032" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="567" width="1" height="1" stroke-width="0" istracker="1341906832066" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="317" width="1" height="251" stroke-width="0" istracker="1341906832066" fill-opacity="0.002" visibility="" zindex="1" style=""></rect><rect rx="1" ry="1" fill="rgb(192,192,192)" x="0" y="549" width="1" height="19" stroke-width="0" istracker="1341906832066" fill-opacity="0.002" visibility="" zindex="1" style=""></rect></g><text x="301" y="28" style="font-family: verdana; font-size: 13px; color: #555555; font-weight: bold; line-height: 14px; fill: #555555;" text-anchor="middle" class="highcharts-title" zindex="1"><tspan x="0">Headline</tspan></text><g class="highcharts-legend" zindex="10" transform="translate(-113,377)"><text x="0" y="0" style="font-family: verdana; font-size: 10px; cursor: pointer; color: #555555; line-height: 14px; fill: #555555;" zindex="2" transform="translate(23,22)"><tspan x="0">Serie1</tspan></text><path d="M -16 -7 L -10.600000000000001 -7 -10.600000000000001 -4.75 -16 -4.75 -16 -3.625 -7 -3.625 -7 -1.375 -16 -1.375 -16 -0.25 -13.3 -0.25 -13.3 2 -16 2 Z" fill="url('#highcharts-1')" stroke-width="0.5" zindex="3" stroke="#698194" style="_cursor: hand; cursor: pointer;" transform="translate(23,14)"></path><text x="0" y="0" style="font-family: verdana; font-size: 10px; cursor: pointer; color: #555555; line-height: 14px; fill: #555555;" zindex="2" transform="translate(23,37)"><tspan x="0">Serie2</tspan></text><path d="M -16 -7 L -10.600000000000001 -7 -10.600000000000001 -4.75 -16 -4.75 -16 -3.625 -7 -3.625 -7 -1.375 -16 -1.375 -16 -0.25 -13.3 -0.25 -13.3 2 -16 2 Z" fill="url('#highcharts-2')" stroke-width="0.5" zindex="3" stroke="#937109" style="_cursor: hand; cursor: pointer;" transform="translate(23,29)"></path><text x="0" y="0" style="font-family: verdana; font-size: 10px; cursor: pointer; color: #555555; line-height: 14px; fill: #555555;" zindex="2" transform="translate(23,52)"><tspan x="0">Serie3</tspan></text><path d="M -16 -7 L -10.600000000000001 -7 -10.600000000000001 -4.75 -16 -4.75 -16 -3.625 -7 -3.625 -7 -1.375 -16 -1.375 -16 -0.25 -13.3 -0.25 -13.3 2 -16 2 Z" fill="url('#highcharts-3')" stroke-width="0.5" zindex="3" stroke="#536f00" style="_cursor: hand; cursor: pointer;" transform="translate(23,44)"></path><text x="0" y="0" style="font-family: verdana; font-size: 10px; cursor: pointer; color: #555555; line-height: 14px; fill: #555555;" zindex="2" transform="translate(23,67)"><tspan x="0">Serie4</tspan></text><path d="M -16 -7 L -10.600000000000001 -7 -10.600000000000001 -4.75 -16 -4.75 -16 -3.625 -7 -3.625 -7 -1.375 -16 -1.375 -16 -0.25 -13.3 -0.25 -13.3 2 -16 2 Z" fill="url('#highcharts-4')" stroke-width="0.5" zindex="3" stroke="#99552a" style="_cursor: hand; cursor: pointer;" transform="translate(23,59)"></path><rect rx="3" ry="3" fill="none" x="0" y="0" width="828" height="8" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" fill-opacity="1" transform="translate(1,1)" visibility=""></rect><rect rx="3" ry="3" fill="none" x="0" y="0" width="828" height="8" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" fill-opacity="1" transform="translate(1,1)" visibility=""></rect><rect rx="3" ry="3" fill="none" x="0" y="0" width="828" height="8" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" fill-opacity="1" transform="translate(1,1)" visibility=""></rect><rect rx="3" ry="3" fill="rgb(255,255,255)" x="0" y="0" width="828" height="8" stroke-width="0" stroke-opacity="1" stroke="rgb(84,84,84)" fill-opacity="1" visibility=""></rect></g><g class="highcharts-axis" zindex="7"></g><g class="highcharts-grid" zindex="1"></g><g class="highcharts-axis" zindex="7"></g><g class="highcharts-grid" zindex="1"></g><text x="301" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; font-weight: bold; line-height: 14px; fill: #555555;" zindex="7" text-anchor="middle"><tspan x="0">Prozentwerte</tspan></text><g class="highcharts-axis" zindex="7"></g><g class="highcharts-grid" zindex="1"></g><rect rx="0" ry="0" fill="url('#highcharts-5')" x="0.5" y="0.5" width="599" height="399" stroke-width="1" stroke-opacity="0.5" stroke="rgb(118,117,117)"></rect><rect rx="3" ry="3" fill="none" x="17" y="0" width="568" height="0" stroke-width="5" fill-opacity="1" stroke="rgb(0,0,0)" stroke-opacity="0.06" transform="translate(1,1)"></rect><rect rx="3" ry="3" fill="none" x="17" y="0" width="568" height="0" stroke-width="3" fill-opacity="1" stroke="rgb(0,0,0)" stroke-opacity="0.12" transform="translate(1,1)"></rect><rect rx="3" ry="3" fill="none" x="17" y="0" width="568" height="0" stroke-width="1" fill-opacity="1" stroke="rgb(0,0,0)" stroke-opacity="0.18" transform="translate(1,1)"></rect><rect rx="3" ry="3" fill="#FFFFFF" x="17" y="0" width="568" height="0" stroke-width="0" fill-opacity="1"></rect><path d="M 0 0" fill="rgb(0,0,0)" fill-opacity="0"></path><path d="M 0 0" fill="rgb(0,0,0)" fill-opacity="0"></path><path d="M 0 0" fill="rgb(0,0,0)" fill-opacity="0"></path><path d="M 0 0" fill="none" stroke-opacity="0" stroke="rgb(0,0,0)" stroke-width="0.1" zindex="1"></path><path d="M 0 0" fill="none" stroke-opacity="0.4" stroke="rgb(113,113,112)" stroke-width="1" zindex="2"></path><path d="M 0 0" fill="none" stroke-opacity="0.4" stroke="rgb(113,113,112)" stroke-width="1" zindex="2"></path><path d="M 0 0" fill="none" stroke-opacity="0.4" stroke="rgb(113,113,112)" stroke-width="1" zindex="2"></path><path d="M 0 0" fill="none" stroke-opacity="0.4" stroke="rgb(113,113,112)" stroke-width="1" zindex="2"></path><path d="M 0 0" fill="none" stroke-opacity="0" stroke="rgb(0,0,0)" stroke-width="0.1" zindex="2"></path><path d="M 0 0" fill="rgb(118,117,117)" fill-opacity="0.1" zindex="1"></path><path d="M 0 0" fill="rgb(118,117,117)" fill-opacity="0.1" zindex="1"></path><g class="highcharts-series-group" zindex="3"><g class="highcharts-series" width="568" height="NaN" transform="translate(585,NaN) rotate(90) scale(-1,1)" clip-path="url('#highcharts-7')" visibility=""><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-8')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#7a97ad" r="1"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-9')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#7a97ad" r="1"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-10')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#7a97ad" r="1"></rect></g><g class="highcharts-series" width="568" height="NaN" transform="translate(585,NaN) rotate(90) scale(-1,1)" clip-path="url('#highcharts-7')" visibility=""><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-11')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#ac840a" r="1"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-12')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#ac840a" r="1"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-13')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#ac840a" r="1"></rect></g><g class="highcharts-series" width="568" height="NaN" transform="translate(585,NaN) rotate(90) scale(-1,1)" clip-path="url('#highcharts-7')" visibility=""><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-14')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#618200" r="1"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-15')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#618200" r="1"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-16')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#618200" r="1"></rect></g><g class="highcharts-series" width="568" height="NaN" transform="translate(585,NaN) rotate(90) scale(-1,1)" clip-path="url('#highcharts-7')" visibility=""><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-17')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#b26331" r="1"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-18')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#b26331" r="1"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="5" stroke-opacity="0.06" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="3" stroke-opacity="0.12" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="none" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="0.18" stroke="rgb(0,0,0)" r="1" transform="translate(-1,-1)"></rect><rect rx="1" ry="1" fill="url('#highcharts-19')" x="0.5" y="568" width="-1" height="0" stroke-width="1" stroke-opacity="1" stroke="#b26331" r="1"></rect></g></g><g class="highcharts-data-labels" visibility="" zindex="6" transform="translate(17,0)"><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text></g><g class="highcharts-data-labels" visibility="" zindex="6" transform="translate(17,0)"><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text></g><g class="highcharts-data-labels" visibility="" zindex="6" transform="translate(17,0)"><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text></g><g class="highcharts-data-labels" visibility="" zindex="6" transform="translate(17,0)"><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text><text x="562" y="NaN" style="font-family: verdana; font-size: 10px; color: #555555; line-height: 14px; fill: #555555;" text-anchor="end" zindex="1"><tspan x="562"> </tspan></text></g></svg>

Has anyone a suggestion why the positions and some heights are calculated incorrectly?

THX

Edited July 10, 2012 by rouven

Charles.Essien · July 13, 2012

Hi,
I'm trying to render (serverside) a chart with nodeJS (with jsDOM environment). It runs without Errors. I fetch the SVG via the export function, but all SVG Elements have a wrong position. (See Attachment).

...

Has anyone a suggestion why the positions and some heights are calculated incorrectly?

Hi, we're having a very similar issue using Env.js and rhino (see here). We believe its because the DOM you're using and we're using arent completely up to grade A standard, and FusionCharts miscalculates values for styling. You could try adjusting the cosmetic properties mentioned in the API (padding, margin, etc) manually and seeing if that solves your problem.

- Charles

July 16, 2012

Hi, we're having a very similar issue using Env.js and rhino (see here). We believe its because the DOM you're using and we're using arent completely up to grade A standard, and FusionCharts miscalculates values for styling. You could try adjusting the cosmetic properties mentioned in the API (padding, margin, etc) manually and seeing if that solves your problem.

- Charles

Hi Charles,

We are looking into this. We will get back to you shortly.

Sign In

Positions Of The Svg Element Are Calculated Incorrectly

Recommended Posts

rouven

Share this post

Link to post

Share on other sites

Charles.Essien

Share this post

Link to post

Share on other sites

Guest Sumedh

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity