![](https://forum.fusioncharts.com/uploads/set_resources_2/84c1e40ea0e759e3f1505eb1788ddf3c_default_photo.png)
jocelynd
Members-
Content count
2 -
Joined
-
Last visited
About jocelynd
-
Rank
Forum Newbie
Recent Profile Visitors
1,250 profile views
-
Hi We have a data value contains character "&". When I try to display it on centerLabel of the doughnut2d, it renders as encoded html "&". This scenario happens when I have the following centerLabel = "$label<br> $value". If I remove "<br>" from the center label, it renders "&" correctly. I need to display the center label in 2 lines. You can duplicate the scenario with your gallery example http://jsfiddle.net/wYj95/980/ Just change out the following from your example:After that, you will see & when you hover over Food & Services sector. "centerLabel": "Revenue from $label:<br>$value", "data": [ { "label": "Food & Services", "value": "28504" }, I'm using FusionCharts 3.7.1 and angular-fusioncharts.min.js. Any help will be appreciated. Thanks. Jocelyn
-
Line chart width issues (specifically in IE9 and IE10)
jocelynd replied to BekahMurphy's topic in General usage
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>