<script language="javascript" type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/3.19.0-dev/fusioncharts.js"></script>
<div id="chart-container"></div>

#chart-container {
  height: 500px;
  width: 1500;
}

const dataSource = {
  chart: {
    caption: "Android Distribution for our app",
    subcaption: "For all users in 2017",
    showlegend: "1",
    showpercentvalues: "1",
    legendPosition: "right",
    defaultcenterlabel: "Android Distribution",
    aligncaptionwithcanvas: "0",
    captionpadding: "0",
    decimals: "1",
    plottooltext:
      "<b>$percentValue</b> of our Android users are on <b>$label</b>",
    centerlabel: "# Users: $value",
    theme: "fusion"
  },
  data: [
    {
      label: "Ice Cream Sandwich",
      value: "1000"
    },
    {
      label: "Jelly Bean",
      value: "5300"
    },
    {
      label: "Kitkat",
      value: "10500"
    },
    {
      label: "Lollipop",
      value: "18900"
    },
    {
      label: "Marshmallow",
      value: "17904"
    }
  ]
};

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