Sunburst with Syncfusion

by cristiscu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/common/ej.core.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/15.1.0.37/js/datavisualization/ej.sunburstchart.js" type="text/javascript"></script>

<div class="chart_cont">
    <div id="chart_div"></div>
</div>

JavaScript

$(function() {
   $("#chart_div").ejSunburstChart({
      size: {
         width: "300",
         height: "185"
      },
      dataLabelSettings: { visible: true },
      innerRadius: 0.2,
      
      valueMemberPath: "Quantity",
      levels: [
            { groupMemberPath: "Country" },
            { groupMemberPath: "Year" }
      ],
      
      dataSource: [
         { Country: "US", Year: "2007", Quantity: 20 },
         { Country: "US", Year: "2008", Quantity: 12 },
         { Country: "US", Year: "2009", Quantity: 18 },
         { Country: "France", Quantity: 43 },
         { Country: "UK", Quantity: 30 },
      ],
   });
});