Resizing Broken 3.17.0
When used with sencha framework.
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/resources/css/ext-all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/adapter/ext/ext-base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/ext-all.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
JavaScript
FusionCharts.ready(function() {
var salesChart;
salesChart = new FusionCharts({
type: "overlappedColumn2d",
width: "100%",
height: "400",
dataFormat: "json",
dataSource: {
"chart": {
"caption": "Resizing Broken with 3.17, works with 3.16",
"subCaption": "in 2016",
"xAxisName": "Country",
"yAxisName": "Amount (in USD)",
"showValues": "0",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "Switzerland"
}, {
"label": "USA"
}, {
"label": "Canada"
}]
}],
"dataset": [{
"seriesname": "Healthcare Expenses per capita (in USD) in Public sector",
"data": [{
"value": "5038"
}, {
"value": "4860"
}, {
"value": "3341"
}]
}, {
"seriesname": "Healthcare Expenses per capita (in USD) in Private sector",
"data": [{
"value": "2881"
}, {
"value": "5032"
}, {
"value": "1412"
}]
}]
},
events: {
rendered: function(e) {
var chart = e.sender;
setTimeout(() => {
chart.resizeTo("400", "300")
}, 2000)
}
}
});
// Using Sencha ext3.4 creating a viewport frame and a panel, render chart in panel
// when panel div size changes fusion charts no longer recognizes the change in 3.17.0
new Ext.Viewport({
layout: 'fit',
items: [{
xtype: 'panel',
title: 'Chart Test',
bodyStyle: 'border: 1px solid red', // so you can see the container size
listeners: {
// After Ext...