CODEWITHSUNDEEP
javascripthtmlfusioncharts
Sangram Badi
Sangram Badi

Reputation: 4264

How to reduce fusion donut2d chart slice thickness?

I am trying to reduce fusion donut2d chart slice thickness. check below image, i have reduce the thickness of green slice mannually, but i want to do it in pragmatically for all slice.

enter image description here

<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var revenueChart = new FusionCharts({
        "type": "doughnut2d",
        "renderAt": "chartContainer",
        "width": '450',
        "height": '450',
        "dataFormat": "json",
        "dataSource":  {
          "chart": {
                "caption": "Split of Revenue by Product Categories",
                "subCaption": "Last year",
                "numberPrefix": "$",
                "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
                "bgColor": "#ffffff",
                "showBorder": "0",
                "use3DLighting": "0",
                "showShadow": "0",
                "enableSmartLabels": "0",
                "startingAngle": "310",
                "showPlotBorder": "1",
                "showLabels": "0",
                "showPercentValues": "1",
                "showLegend": "1",
                "legendShadow": "30",
                "legendBorderAlpha": "0",
                "defaultCenterLabel": "Total revenue: $64.08K",
                "centerLabel": "Revenue from $label: $value",
                "centerLabelBold": "1",
                "showTooltip": "0",
                "decimals": "1",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0"
            },
         "data": [
                {
                    "label": "Food",
                    "value": "12"
                }, 
                {
                    "label": "Apparels",
                    "value": "10"
                }, 
                {
                    "label": "Electronics",
                    "value": "20"
                }, 
                {
                    "label": "Household",
                    "value": "8"
                },
                {
                    "label": "Test",
                    "value": "5"
                }
            ]
      }

  });
revenueChart.render();
})
</script>
</head>
<body>
  <div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>

Upvotes: 1

Views: 787

Answers (2)

Aman Saraswat
Aman Saraswat

Reputation: 172

To customize the inner radius of the doughnut chart, set the value of doughnutRadius attribute in percent

{
      "chart": {
        "doughnutRadius": "80"
      }
    }

To know more about this feature please refer - https://www.fusioncharts.com/dev/chart-guide/standard-charts/pie-and-doughnut-charts#set-the-radius-as-a-percent-value

Refer to the demo fiddle - https://jsfiddle.net/c24e59hm/1/

Upvotes: 0

Arnab003
Arnab003

Reputation: 355

Actually the inner radius of Doughnut can be controlled with the attribute "doughnutRadius".

doughnutRadius : Number [-]
This attribute lets you explicitly set the inner radius of the chart. FusionCharts XT automatically calculates the best fit radius for the chart. This attribute is useful if you want to enforce one of your own values.

Range: In Pixels

Here is a Sample to the solution of your problem.

Please let me know if you have any further concerns. Thank You!

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'doughnut2d',
        renderAt: 'chart-container',
        width: '450',
        height: '450',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Split of Revenue by Product Categories",
                "subCaption": "Last year",
                "numberPrefix": "$",
                "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
                "bgColor": "#ffffff",
                "showBorder": "0",
                "use3DLighting": "0",
                "showShadow": "0",
                "enableSmartLabels": "0",
                "startingAngle": "310",
                "showLabels": "0",
                "showPercentValues": "1",
                "showLegend": "1",
                "legendShadow": "0",
                "legendBorderAlpha": "0",
                "defaultCenterLabel": "Total revenue: $64.08K",
                "centerLabel": "Revenue from $label: $value",
                "centerLabelBold": "1",
                "showTooltip": "0",
                "decimals": "0",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "doughnutRadius": "100"
            },
            "data": [
                {
                    "label": "Food",
                    "value": "28504"
                }, 
                {
                    "label": "Apparels",
                    "value": "14633"
                }, 
                {
                    "label": "Electronics",
                    "value": "10507"
                }, 
                {
                    "label": "Household",
                    "value": "4910"
                }
            ]
        }
    }).render();
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!-- Doughnut chart example with: 
# Center label in 2D chart 
# Disabled tool-tips are disabled, but extended center label info on hover

-->
<div id="chart-container">FusionCharts will render here</div>

Upvotes: 3

Related Questions