<script language="javascript" type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<div style="height: 400px; width:400px;">

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

</div>

#chart-container {
  width: 800px;
  height: 300px;
}

FusionCharts.ready(function () {
  var revenueChart = new FusionCharts({
    type: "doughnut2d",
    renderAt: "chart-container",
    width: "100%",
    height: "100%",
    dataFormat: "json",

    dataSource: {
      chart: {
        caption: "Split of Revenue by Product Categories",
        subCaption: "Last year",
        numberPrefix: "$",
        startingAngle: "310",
        defaultCenterLabel: "Total revenue: $64.08K",
        centerLabel: "Revenue from $label: $value",
        centerLabelBold: "1",
        showTooltip: "1",
        showLabels: "0",
        showlegend: "1",
        showpercentvalues: "1",
        legendposition: "right",
        legendWidth: "80",
        legendPosition: "right",
        theme: "fusion"
      },
      data: [
        {
          label: "28504 Food Items in 2020",
          value: "28504"
        },
        {
          label: "14633 Apparels Items in 2020",
          value: "14633"
        },
        {
          label: "10507 Electronics Items in 2020",
          value: "10507"
        },
        {
          label: "4910 Household Items in 2020",
          value: "4910"
        }
      ]
    }
  }).render();
});