<center><div id="chart-container">Awesome Chart on its way!</div></center>
(function () {
$("#chart-container").insertFusionCharts({
        type: "doughnut2d",
        width: "450",
        height: "350",
        dataFormat: "json",
        dataSource: {
    "chart": {
                "caption": "Ecommerce Revenue Distribution",
      "subCaption": "By Product Category",
                "numberPrefix":"$",
                "paletteColors":"#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
                "bgColor":"#F6F6F6",
                "baseFontColor":"#666666",
                "bgAlpha":"100",
                "showBorder":"0",
                "use3DLighting":"0",
                "showShadow":"0",
                "enableSmartLabels":"0",
                "startingAngle":"310",
                "showLabels":"0",
                "showPercentValues":"1",
                "showLegend":"1",
                "legendBgColor":"#ffffff",
                "legendBgAlpha":"100",
                "legendBorderAlpha":"50",
                "legendBorderColor":"#888888",
                "legendShadow":"0",
                "defaultCenterLabel":"Total revenue: $64.08K",
                "centerLabel":"Revenue from $label: $value",
                "centerLabelBold":"1",
                "showTooltip":"1",
                "decimals":"0",
                "captionFontSize":"14",
                "subcaptionFontSize":"14",
                "subcaptionFontBold":"0",
                "toolTipColor":"#ffffff",
                "toolTipBorderColor":"#ffffff",
                "toolTipBorderThickness":"1",
                "toolTipBgColor":"#000000",
                "toolTipBgAlpha":"80",
                "toolTipBorderRadius":"4",
                "toolTipPadding":"10",
                "toolTipFontSize":"20"
                },

        "data": [
                    {"label":"Food","value":"28504"},
                    {"label":"Apparels","value":"14633"},
                    {"label":"Electronics","value":"10507"},
                    {"label":"Household","value":"4910"}
                ]
}
    });
}());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://static.fusioncharts.com/code/latest/fusioncharts.js
  2. https://static.fusioncharts.com/code/latest/fusioncharts.charts.js
  3. https://code.jquery.com/jquery-2.2.4.min.js
  4. https://rawgit.com/fusioncharts/fusioncharts-jquery-plugin/master/package/fusioncharts-jquery-plugin.js