Labels outside Sunburst slices
These two demos show how we can use adapters to selectively display labels outside some of the Sunburst slices.
Labels on last level
Section titled “Labels on last level”This demo puts labels outside of slices for the outside series.
Open in:New tab
/** * --------------------------------------- * 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/ * --------------------------------------- */
am4core.useTheme(am4themes_animated);
// Create the chartvar chart = am4core.create("chartdiv", am4plugins_sunburst.Sunburst);
chart.radius = am4core.percent(80);
// Make colors more distinctivechart.colors.step = 2;
// Add multi-level datachart.data = [ { name: "A", children: [ { name: "A1", value: 100 }, { name: "A2", value: 60 } ] },
{ name: "B", children: [ { name: "B1", value: 135 }, { name: "B2", value: 98 } ] },
{ name: "C", children: [ { name: "C1", children: [ { name: "EE1", value: 130 }, { name: "EE2", value: 87 }, { name: "EE3", value: 55 } ] },
{ name: "C2", value: 148 }, { name: "C3", children: [ { name: "CC1", value: 53 }, { name: "CC2", value: 30 } ] },
{ name: "C4", value: 26 } ] },
{ name: "D", children: [ { name: "D1", value: 415 }, { name: "D2", value: 148 }, { name: "D3", value: 89 } ] },
{ name: "E", children: [ { name: "E1", children: [ { name: "EE1", value: 33 }, { name: "EE2", value: 40 }, { name: "EE3", value: 89 } ] },
{ name: "E2", value: 148 } ] }];
// Define data fieldschart.dataFields.value = "value";chart.dataFields.name = "name";chart.dataFields.children = "children";
// Configure levelsvar level0 = chart.seriesTemplates.create("0");level0.labels.template.text = "{category}";
var level1 = chart.seriesTemplates.create("1");level1.slices.template.fillOpacity = 0.75;level1.labels.template.text = "{category}";
var level2 = chart.seriesTemplates.create("2");level2.slices.template.fillOpacity = 0.5;level2.labels.template.text = "{category}";//level2.labels.template.radius = 10;level2.labels.template.inside = false;level2.labels.template.fill = am4core.color("#000");<div id="chartdiv"></div>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: 500px;}sunburst-diagram-outside-labelsLabels on child-less slices
Section titled “Labels on child-less slices”This demo shows how we can selectively display labels outside of those slices that do not have any children of their own.
Open in:New tab
/** * --------------------------------------- * 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/ * --------------------------------------- */
am4core.useTheme(am4themes_animated);
// Create the chartvar chart = am4core.create("chartdiv", am4plugins_sunburst.Sunburst);
chart.radius = am4core.percent(80);
// Make colors more distinctivechart.colors.step = 2;
// Add multi-level datachart.data = [ { name: "A", children: [ { name: "A1", value: 100 }, { name: "A2", value: 60 } ] },
{ name: "B", children: [ { name: "B1", value: 135 }, { name: "B2", value: 98 } ] },
{ name: "C", children: [ { name: "C1", children: [ { name: "EE1", value: 130 }, { name: "EE2", value: 87 }, { name: "EE3", value: 55 } ] },
{ name: "C2", value: 148 }, { name: "C3", children: [ { name: "CC1", value: 53 }, { name: "CC2", value: 30 } ] },
{ name: "C4", value: 26 } ] },
{ name: "D", children: [ { name: "D1", value: 415 }, { name: "D2", value: 148 }, { name: "D3", value: 89 } ] },
{ name: "E", children: [ { name: "E1", children: [ { name: "EE1", value: 33 }, { name: "EE2", value: 40 }, { name: "EE3", value: 89 } ] },
{ name: "E2", value: 148 } ] }];
// Define data fieldschart.dataFields.value = "value";chart.dataFields.name = "name";chart.dataFields.children = "children";
// Configure levelsvar level0 = chart.seriesTemplates.create("0");level0.labels.template.text = "{category}";level0.labels.template.adapter.add("inside", labelInside);level0.labels.template.fill = am4core.color("#000");
var level1 = chart.seriesTemplates.create("1");level1.slices.template.fillOpacity = 0.75;level1.labels.template.text = "{category}";level1.labels.template.adapter.add("inside", labelInside);level1.labels.template.fill = am4core.color("#000");
var level2 = chart.seriesTemplates.create("2");level2.slices.template.fillOpacity = 0.5;level2.labels.template.text = "{category}";level2.labels.template.adapter.add("inside", labelInside);level2.labels.template.fill = am4core.color("#000");
function labelInside(inside, target) { return ( target.dataItem.sunburstDataItem.children && target.dataItem.sunburstDataItem.children.length );}<div id="chartdiv"></div>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: 500px;}sunburst-diagram-outside-labels-adaptive