jocelynd

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

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>