Change fusion chart division height and width

Question

I am trying to change the height and width of fusion chart division but it also decreases the chart height and width.

Code:

    <div class="col-lg-4">
      <div class="modal-body padding0" style="min-height:300px;">
        <fusioncharts width= '300' height= '150' type="doughnut2d" [dataSource]="dataSpurceUserExp"> </fusioncharts>
      </div>
    </div>

    <div class="col-lg-4">
      <div class="modal-body padding0" style="min-height:300px;">
        <fusioncharts width= '300' height= '150' type="doughnut2d" [dataSource]="dataSpurceUserExp"> </fusioncharts>
      </div>
    </div>

See the attached image.

Answer 1

The FusionCharts Doughnut chart adjusts its inner and outer doughnut radius along with various components like legends, labels, values to accommodate within the dimensions provided to the chart height and width.

So, the doughnut radius will change with different chart dimension provided based on the available space on the chart.

There is an option to provide the chart dimensions in percentage, in that case the container div must be provided with the height/width in pixels or dynamically(may be using Bootstrap).

So, when the div dimension is dynamically set using Bootstrap and the chart dimension in percentage, the doughnut radius gets changed with change in the chart dimension dynamically.

Refer to the sample fiddle : https://jsfiddle.net/kv8npm1w/

FusionCharts.ready(function() {
  var revenueChart1 = new FusionCharts({
    type: 'doughnut2d',
    renderAt: 'chart-container1',
    width: '100%',
    height: '350',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Caption",
        "subCaption": "Sub-caption",
        "showValues": "0",
        "showLabels": "0",
        "showLegend": "1",
        "legendPosition": "RIGHT",
        "numberPrefix": "$",
        "startingAngle": "310",
        "showTooltip": "0",
        "decimals": "0"
      },
      "data": [{
        "label": "Work place services",
        "value": "28504"
      }]
    }
  }).render();
  var revenueChart2 = new FusionCharts({
    type: 'doughnut2d',
    renderAt: 'chart-container2',
    width: '100%',
    height: '350',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Caption",
        "subCaption": "Sub-caption",
        "showValues": "0",
        "showLabels": "0",
        "showLegend": "1",
        "legendPosition": "RIGHT",
        "numberPrefix": "$",
        "startingAngle": "310",
        "showTooltip": "0",
        "decimals": "0"
      },
      "data": [{
        "label": "Work place services",
        "value": "28504"
      }]
    }
  }).render();
  var revenueChart3 = new FusionCharts({
    type: 'doughnut2d',
    renderAt: 'chart-container3',
    width: '100%',
    height: '350',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Caption",
        "subCaption": "Sub-caption",
        "showValues": "0",
        "showLabels": "0",
        "showLegend": "1",
        "legendPosition": "RIGHT",
        "numberPrefix": "$",
        "startingAngle": "310",
        "showTooltip": "0",
        "decimals": "0"
      },
      "data": [{
        "label": "Work place services",
        "value": "28504"
      }]
    }
  }).render();
});

Also, there is a provision to set the inner and outer radius explicitly using "doughnutRadius" and "pieRadius" respectively in the chart dataSource.

But please note, setting the radius explicitly may result in overlapping or the doughnut going out of the chart dimension, as it will not adjust its radius now since it has been set explicitly.

Sample fiddle(first chart with radius set explicitly) : https://jsfiddle.net/kv8npm1w/2/

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'doughnut2d',
    renderAt: 'chart-container1',
    width: '100%',
    height: '350',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Split of Revenue by Product Categories",
        "subCaption": "Last year",
        "legendPosition": "RIGHT",
        "showLegend": "1",
        "showLabels": "0",
        "showValues": "0",
        "numberPrefix": "$",
        "startingAngle": "310",
        "showTooltip": "0",
        "decimals": "0",
        "pieRadius": "80",
        "doughnutRaius": "60"
      },
      "data": [{
        "label": "Work place services",
        "value": "28504"
      }]
    }
  }).render();
  var revenueChart = new FusionCharts({
    type: 'doughnut2d',
    renderAt: 'chart-container2',
    width: '100%',
    height: '350',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Split of Revenue by Product Categories",
        "subCaption": "Last year",
        "legendPosition": "RIGHT",
        "showLegend": "1",
        "showLabels": "0",
        "showValues": "0",
        "numberPrefix": "$",
        "startingAngle": "310",
        "showTooltip": "0",
        "decimals": "0"
      },
      "data": [{
        "label": "Work place services",
        "value": "28504"
      }]
    }
  }).render();
  var revenueChart = new FusionCharts({
    type: 'doughnut2d',
    renderAt: 'chart-container3',
    width: '100%',
    height: '350',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Split of Revenue by Product Categories",
        "subCaption": "Last year",
        "legendPosition": "RIGHT",
        "showLegend": "1",
        "showLabels": "0",
        "showValues": "0",
        "numberPrefix": "$",
        "startingAngle": "310",
        "showTooltip": "0",
        "decimals": "0"
      },
      "data": [{
        "label": "Work place services",
        "value": "28504"
      }]
    }
  }).render();
});