<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();
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.