Sunburst chart

Sunburst Chart or Diagram represents hierarchical relational data in a circular chart. It looks similar to <a href="https://www.amcharts.com/demos/nested-donut-chart/">nested donut charts</a>, however, the hierarchical nature of the Sunburst means that each level represents detalization of the previous one. In other words, children slices on each level comprise the whole of the parent slice.

by Rogério Saraceni

HTML

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/sunburst.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/material.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 550px;
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_material);
am4core.useTheme(am4themes_animated);
// Themes end



// create chart
var chart = am4core.create("chartdiv", am4plugins_sunburst.Sunburst);

chart.data = [{
  name: "Atrasado",
  children: [
    {
      name: "Prazo",
      children: [
        { name: "Aguardando aprovação", value: 130 },
        { name: "Reprovado", value: 55 }
      ]
    },
    { name: "Programado", value: 148 }
   ]},
{
  name: "Programado", value: 415
},
{
  name: "Realizado",
  children: [
    { name: "No Prazo", value: 415 },
    { name: "Fora do Prazo", value: 89 }
  ]
}];


chart.colors.step = 2;
chart.fontSize = 11;
chart.innerRadius = am4core.percent(10);
chart.radius = am4core.percent(100);

// define data fields
chart.dataFields.value = "value";
chart.dataFields.name = "name";
chart.dataFields.children = "children";

var level1SeriesTemplate = new am4plugins_sunburst.SunburstSeries();
chart.seriesTemplates.setKey("1", level1SeriesTemplate)
level1SeriesTemplate.fillOpacity = 0.75;
level1SeriesTemplate.hiddenInLegend = true;

var level2SeriesTemplate = new am4plugins_sunburst.SunburstSeries();
chart.seriesTemplates.setKey("2", level2SeriesTemplate)
level2SeriesTemplate.fillOpacity = 0.5;
level2SeriesTemplate.hiddenInLegend = true;

chart.legend = new am4charts.Legend();
// chart.legend.position = "right";