<script language="javascript" type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/3.20.0/fusioncharts.js"></script>
<script language="javascript" type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div id="chart-container">FusionCharts will render here</div>
<div style="height: 300px;">
FusionCharts.ready(function () {
  var revenueChart = new FusionCharts({
    type: "doughnut2d",
    renderAt: "chart-container",
    width: "100%",
    height: "100%",
    dataFormat: "json",
    dataSource: {
      chart: {
        caption: " Product Categorization",
        subCaption: "Last year",
        numberPrefix: "$",
        startingAngle: "310",
        defaultCenterLabel: "Total Credits: $102.08K",
        centerLabel: "Revenue from $label: $value",
        centerLabelBold: "1",
        showTooltip: "0",
        showLabels: "0",
        legendPosition: "right",
        showlegend: "1",
        disableLegendScroll: "1",
        theme: "fusion"
      },
      data: [
        {
          label: "16504 Food Items in 2020",
          value: "16504"
        },
        {
          label: "30633 Apparels Items in 2020",
          value: "30633"
        },
        {
          label: "18507 Electronics Items in 2020",
          value: "18507"
        },
        {
          label: "810 Household Items in 2020",
          value: "36910"
        }
      ]
    }
  }).render();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.