Line chart width issues (specifically in IE9 and IE10)

[BekahMurphy]

I have created a line chart (trended data over time) that works as expected in all browsers except IE9 and IE10. 

In the chart config, I have
 

        type: "msline",

        width: "100%",

        height: "300",

        dataFormat: "json",

 

and in most browsers it correctly sizes itself to the container element (which has a width of 691px set on it). However, in IE9 and IE10, it sets itself to the width of the browser window, ignoring several layers of parent elements with set widths. Since the chart starts at the correct place on the left, this means it extends far off the page to the right. For some reason, my manager isn't a fan of this look.

You may be asking, "why don't you just set the width of the chart to 691 in the js?" Here's the thing: if I set the width to any non-percentage size, the chart renders at 512px wide. Every time. No matter if the size I set it to is larger or smaller; it just draws at 512.

I will also say I have bar charts set up on another page and they look fine across all browsers. 

[Vishalika]

Hi,

 

Welcome to FusionCharts Forum.

 

Try setting this style to your sample:

<style>
html, body { height: 100%; width: 100%; }
div { height: 100%; width: 100%;  }
</style>

Hope this helps.

[BekahMurphy]

Unfortunately, adding the additional heights and widths resulted in no positive changes.

This is very frustrating because it is happening in IE9 and IE10 only. All other browsers (IE11, Chrome, Firefox, Safari) are displaying correctly. And it is just the line graphs. Bar charts look fine in all browsers.

[Vishalika]

Hi,

 

Can you please share the scaled down sample from your end so that we can help you out further?

 

Awaiting response.

[jocelynd]

Is there more information on this problem? 

 

I have the same problem with stackedbar2d in IE 9 & 10. Setting width=100% causes the chart to render off the page in IE9 & 10. When I set a fixed px width, the chart renders correctly in IE 10. However, it broke Chrome. With fixed px width, the chart renders its svg with 512 as the width in Chrome. There is no good way for me to show the chart correctly in both IE 10 and Chrome. Any help will be appreciated.

 

Following are two rendered html in Chrome and IE 10. 

 

IE 10 - width=100%

 

<div class="ng-isolate-scope" type="stackedbar2d" fusioncharts="" datasource='{"chart":{"caption":"","subCaption":"","xAxisName":"","yAxisName":"","numberPrefix":"","numberSuffix":"","bgAlpha":"0","canvasBgAlpha":"0","legendBgAlpha":"0","showCanvasBorder":"0","showBorder":"0","usePlotGradientColor":"0","plotBorderAlpha":"0","valueFontColor":"#FFFFFF","showXAxisLine":"0","xAxisLineColor":"#999999","divLineColor":"#999999","divLineDashed":"1","showAlternateVGridColor":"0","stack100Percent":"1","showHoverEffect":"1","formatNumberScale":"0","showLegend":"0","divLineAlpha":"0","showDivLineValues":"0","showValues":"0","showYAxisValues":"0","chartTopMargin":"0","chartRightMargin":"0","chartBottomMargin":"0","chartLeftMargin":"0","yAxisValuesPadding":"0","placeValuesInside":"0","showLimits":"0","baseFont":"Roboto","baseFontSize":"14","showTooltip":"0"},"categories":[{"category":[{"label":""}]}],"dataset":[{"seriesname":"","data":[{"value":8,"color":"#ED2C65"}],"isPercent":true},{"seriesname":"","data":[{"value":92,"color":"#414141"}]}]}' height="35" width="100%"><span class="fusioncharts-container" id="chartobject-3" style="margin: 0px; padding: 0px; border: currentColor; width: 1920px; height: 35px; text-align: left; line-height: normal; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; display: inline-block; position: relative; direction: ltr; -ms-zoom: 1;">

<svg xmlns="http://www.w3.org/2000/svg"id="raphael-paper-27" style="overflow: hidden; position: relative; cursor: default; -ms-user-select: none; background-color: rgba(255, 255, 255, 1); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; -moz-user-select: -moz-none; user-select: none; -khtml-user-select: none; -o-user-select: none;" width="1920" height="35" xmlns="http://www.w3.org/2000/svg"version="1.1"><desc>Stacked Bar Chart</desc><defs><linearGradient id="27-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100" x1="0" y1="1" x2="6.12323e-017" y2="0"><stop stop-color="#cbcbcb" stop-opacity="0" offset="0%" /><stop stop-color="#e9e9e9" stop-opacity="0" offset="100%" /></linearGradient><clipPath id="63E38AA7-A039-4B82-8FD6-F38E9A689175"><rect transform="matrix(1 0 0 1 0 0)" x="0" y="0" width="1920" height="35" /></clipPath></defs><g class="raphael-group-28-background"><rect style="opacity: 1; fill-opacity: 1; stroke: none;" opacity="1" fill="url(#27-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100)" fill-opacity="1" stroke="none" x="0" y="0" width="1920" height="35" rx="0" ry="0" /><rect style="fill: none; stroke: #767575; stroke-opacity: 0.5;" fill="none" stroke="#767575" stroke-dasharray="none" stroke-opacity="0.5" stroke-width="0" x="0" y="0" width="1920" height="35" rx="0" ry="0" /></g><g class="raphael-group-35-canvas"><rect style="fill: none; stroke: #545454; stroke-linejoin: miter; stroke-opacity: 1;" fill="none" stroke="#545454" stroke-linejoin="miter" stroke-opacity="1" stroke-width="0" x="0" y="0" width="1920" height="35" rx="0" ry="0" /><rect style="fill: #ffffff; fill-opacity: 0; stroke: none;" fill="#ffffff" fill-opacity="0" stroke="none" stroke-width="0" x="0" y="0" width="1920" height="35" rx="0" ry="0" /></g><g class="raphael-group-38-axisbottom"><g class="raphael-group-41-y-axis-bands" /><g class="raphael-group-47-x-axis-bands"><rect style="fill: #767575; fill-opacity: 0; stroke: #000000;" fill="#767575" fill-opacity="0" stroke="#000000" stroke-width="0" x="384" y="0" width="384" height="35" rx="0" ry="0" /><rect style="fill: #767575; fill-opacity: 0; stroke: #000000;" fill="#767575" fill-opacity="0" stroke="#000000" stroke-width="0" x="1152" y="0" width="384" height="35" rx="0" ry="0" /></g><g class="raphael-group-53-x-axis-bands" /><g class="raphael-group-43-y-axis-lines" /><g class="raphael-group-49-x-axis-lines"><path style="fill: none; stroke: #999999; stroke-opacity: 0;" fill="none" stroke="#999999" stroke-dasharray="4,2" stroke-opacity="0" stroke-width="1" d="M 0 0 L 0 35" shape-rendering="crispEdges" /><path style="fill: none; stroke: #999999; stroke-opacity: 0;" fill="none" stroke="#999999" stroke-dasharray="4,2" stroke-opacity="0" stroke-width="1" d="M 384 0 L 384 35" shape-rendering="crispEdges" /><path style="fill: none; stroke: #999999; stroke-opacity: 0;" fill="none" stroke="#999999" stroke-dasharray="4,2" stroke-opacity="0" stroke-width="1" d="M 768 0 L 768 35" shape-rendering="crispEdges" /><path style="fill: none; stroke: #999999; stroke-opacity: 0;" fill="none" stroke="#999999" stroke-dasharray="4,2" stroke-opacity="0" stroke-width="1" d="M 1152 0 L 1152 35" shape-rendering="crispEdges" /><path style="fill: none; stroke: #999999; stroke-opacity: 0;" fill="none" stroke="#999999" stroke-dasharray="4,2" stroke-opacity="0" stroke-width="1" d="M 1536 0 L 1536 35" shape-rendering="crispEdges" /><path style="fill: none; stroke: #999999; stroke-opacity: 0;" fill="none" stroke="#999999" stroke-dasharray="4,2" stroke-opacity="0" stroke-width="1" d="M 1920 0 L 1920 35" shape-rendering="crispEdges" /></g><g class="raphael-group-55-x-axis-lines" /><g class="fusioncharts-xaxis-0-gridlabels" /><g class="fusioncharts-yaxis-0-gridlabels" /><g class="fusioncharts-yaxis-1-gridlabels" /><g class="raphael-group-58-axis-name" /></g><g class="raphael-group-29-dataset"><g class="raphael-group-67-shadows" /><g class="raphael-group-68-bars" clip-path="url("#63E38AA7-A039-4B82-8FD6-F38E9A689175")"><rect style="fill: #ed2c65; fill-opacity: 1; stroke: #333333; stroke-linejoin: miter; stroke-opacity: 0;" fill="#ed2c65" fill-opacity="1" stroke="#333333" stroke-dasharray="none" stroke-linejoin="miter" stroke-opacity="0" stroke-width="1" x="0.5" y="3.5" width="153" height="28" rx="0" ry="0" /><rect style="fill: #414141; fill-opacity: 1; stroke: #333333; stroke-linejoin: miter; stroke-opacity: 0;" fill="#414141" fill-opacity="1" stroke="#333333" stroke-dasharray="none" stroke-linejoin="miter" stroke-opacity="0" stroke-width="1" x="153.5" y="3.5" width="1766" height="28" rx="0" ry="0" /></g></g><g class="raphael-group-39-axistop"><g class="raphael-group-40-y-axis-bands" /><g class="raphael-group-46-x-axis-bands" /><g class="raphael-group-52-x-axis-bands" /><g class="raphael-group-42-y-axis-lines" /><g class="raphael-group-48-x-axis-lines" /><g class="raphael-group-54-x-axis-lines" /><g class="fusioncharts-xaxis-0-gridlabels" /><g class="fusioncharts-yaxis-0-gridlabels" /><g class="fusioncharts-yaxis-1-gridlabels" /></g><g class="fusioncharts-datalabels" transform="matrix(1 0 0 1 0 0)" /><g class="raphael-group-30-hot" /><g class="raphael-group-33-buttons" /></svg></span></div>

 

Chrome - width = 212

 

<div fusioncharts="" type="stackedbar2d" width="212" height="35" datasource="{"chart":{"caption":"","subCaption":"","xAxisName":"","yAxisName":"","numberPrefix":"","numberSuffix":"","bgAlpha":"0","canvasBgAlpha":"0","legendBgAlpha":"0","showCanvasBorder":"0","showBorder":"0","usePlotGradientColor":"0","plotBorderAlpha":"0","valueFontColor":"#FFFFFF","showXAxisLine":"0","xAxisLineColor":"#999999","divLineColor":"#999999","divLineDashed":"1","showAlternateVGridColor":"0","stack100Percent":"1","showHoverEffect":"1","formatNumberScale":"0","showLegend":"0","divLineAlpha":"0","showDivLineValues":"0","showValues":"0","showYAxisValues":"0","chartTopMargin":"0","chartRightMargin":"0","chartBottomMargin":"0","chartLeftMargin":"0","yAxisValuesPadding":"0","placeValuesInside":"0","showLimits":"0","baseFont":"Roboto","baseFontSize":"14","showTooltip":"0"},"categories":[{"category":[{"label":""}]}],"dataset":[{"seriesname":"","data":[{"value":8,"color":"#ED2C65"}],"isPercent":true},{"seriesname":"","data":[{"value":92,"color":"#414141"}]}]}" class="ng-isolate-scope"><span id="chartobject-3" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; direction: ltr; width: 212px; height: 35px;">

<svg height="342" version="1.1" width="512" xmlns="http://www.w3.org/2000/svg"id="raphael-paper-27" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);"><desc>Stacked Bar Chart</desc><defs><linearGradient id="27-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100" x1="0" y1="1" x2="6.123233995736766e-17" y2="0"><stop offset="0%" stop-color="#cbcbcb" stop-opacity="0"></stop><stop offset="100%" stop-color="#e9e9e9" stop-opacity="0"></stop></linearGradient><clipPath id="26A26246-9FA8-4767-8A9C-3BE17E7F039D">

<rect x="0" y="0" width="512" height="342" transform="matrix(1,0,0,1,0,0)"></rect></clipPath></defs><g class="raphael-group-28-background"><rect x="0" y="0" width="512" height="342" stroke="none" fill="url('#27-90-rgba_203_203_203_0__0-rgba_233_233_233_0__100')" opacity="1" fill-opacity="1" rx="0" ry="0" style="stroke: none; opacity: 1; fill-opacity: 1;"></rect><rect x="0" y="0" width="512" height="342" stroke="#767575" stroke-opacity="0.5" stroke-width="0" stroke-dasharray="none" fill="none" rx="0" ry="0" style="stroke: rgb(118, 117, 117); stroke-opacity: 0.5; fill: none;"></rect></g><g class="raphael-group-35-canvas"><rect x="0" y="0" width="512" height="342" rx="0" ry="0" stroke-width="0" stroke="#545454" stroke-opacity="1" stroke-linejoin="miter" fill="none" style="stroke: rgb(84, 84, 84); stroke-opacity: 1; stroke-linejoin: miter; fill: none;"></rect><rect x="0" y="0" width="512" height="342" rx="0" ry="0" stroke-width="0" stroke="none" fill-opacity="0" fill="#ffffff" style="stroke: none; fill-opacity: 0; fill: rgb(255, 255, 255);"></rect></g><g class="raphael-group-38-axisbottom"><g class="raphael-group-41-y-axis-bands"></g><g class="raphael-group-47-x-axis-bands"><rect x="102.4" y="0" width="102.4" height="342" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect><rect x="307.2" y="0" width="102.40000000000003" height="342" fill-opacity="0" fill="#767575" stroke-width="0" rx="0" ry="0" stroke="#000000" style="fill-opacity: 0; fill: rgb(118, 117, 117); stroke: rgb(0, 0, 0);"></rect></g><g class="raphael-group-53-x-axis-bands"></g><g class="raphael-group-43-y-axis-lines"></g><g class="raphael-group-49-x-axis-lines"><path d="M0,0L0,342" stroke="#999999" stroke-opacity="0" stroke-width="1" stroke-dasharray="4,2" fill="none" shape-rendering="crispEdges" style="stroke: rgb(153, 153, 153); stroke-opacity: 0; fill: none; shape-rendering: crispEdges;"></path><path d="M102.4,0L102.4,342" stroke="#999999" stroke-opacity="0" stroke-width="1" stroke-dasharray="4,2" fill="none" shape-rendering="crispEdges" style="stroke: rgb(153, 153, 153); stroke-opacity: 0; fill: none; shape-rendering: crispEdges;"></path><path d="M204.8,0L204.8,342" stroke="#999999" stroke-opacity="0" stroke-width="1" stroke-dasharray="4,2" fill="none" shape-rendering="crispEdges" style="stroke: rgb(153, 153, 153); stroke-opacity: 0; fill: none; shape-rendering: crispEdges;"></path><path d="M307.2,0L307.2,342" stroke="#999999" stroke-opacity="0" stroke-width="1" stroke-dasharray="4,2" fill="none" shape-rendering="crispEdges" style="stroke: rgb(153, 153, 153); stroke-opacity: 0; fill: none; shape-rendering: crispEdges;"></path><path d="M409.6,0L409.6,342" stroke="#999999" stroke-opacity="0" stroke-width="1" stroke-dasharray="4,2" fill="none" shape-rendering="crispEdges" style="stroke: rgb(153, 153, 153); stroke-opacity: 0; fill: none; shape-rendering: crispEdges;"></path><path d="M512,0L512,342" stroke="#999999" stroke-opacity="0" stroke-width="1" stroke-dasharray="4,2" fill="none" shape-rendering="crispEdges" style="stroke: rgb(153, 153, 153); stroke-opacity: 0; fill: none; shape-rendering: crispEdges;"></path></g><g class="raphael-group-55-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-1-gridlabels"></g><g class="raphael-group-58-axis-name"></g></g><g class="raphael-group-29-dataset"><g class="raphael-group-67-shadows"></g><g class="raphael-group-68-bars" clip-path="url('#26A26246-9FA8-4767-8A9C-3BE17E7F039D')"><rect x="0.5" y="146.5" width="40" height="50" rx="0" ry="0" fill-opacity="1" fill="#ed2c65" stroke="#333333" stroke-opacity="0" stroke-width="1" stroke-dasharray="none" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(237, 44, 101); stroke: rgb(51, 51, 51); stroke-opacity: 0; stroke-linejoin: miter;"></rect><rect x="40.5" y="146.5" width="471" height="50" rx="0" ry="0" fill-opacity="1" fill="#414141" stroke="#333333" stroke-opacity="0" stroke-width="1" stroke-dasharray="none" stroke-linejoin="miter" style="fill-opacity: 1; fill: rgb(65, 65, 65); stroke: rgb(51, 51, 51); stroke-opacity: 0; stroke-linejoin: miter;"></rect></g></g><g class="raphael-group-39-axistop"><g class="raphael-group-40-y-axis-bands"></g><g class="raphael-group-46-x-axis-bands"></g><g class="raphael-group-52-x-axis-bands"></g><g class="raphael-group-42-y-axis-lines"></g><g class="raphael-group-48-x-axis-lines"></g><g class="raphael-group-54-x-axis-lines"></g><g class="fusioncharts-xaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-0-gridlabels"></g><g class="fusioncharts-yaxis-1-gridlabels"></g></g><g class="fusioncharts-datalabels" transform="matrix(1,0,0,1,0,0)"></g><g class="raphael-group-30-hot"></g><g class="raphael-group-33-buttons"></g></svg></span></div>

[Vishalika]

Hi,

 

The code you have shared seemed to be browser console window and unable to check out anything. 

 

Try sharing a scaled down sample for the same. Also, share the FusionCharts version you are using.

 

Awaiting response.