Sunburst

import * as am5hierarchy from "@amcharts/amcharts5/hierarchy";

const sunburst = root.container.children.push(
  am5hierarchy.Sunburst.new(root, {
    startAngle: -90,
    endAngle: 270,
    radius: am5.percent(100)
  })
);

sunburst.set("startAngle", 0);

sunburst.set("endAngle", 180); // Creates a semicircle

sunburst.set("innerRadius", am5.percent(20)); // 20% of radius
sunburst.set("innerRadius", -100); // 100 pixels from outer edge

sunburst.set("radius", am5.percent(90));
sunburst.set("radius", 300); // 300 pixels

sunburst.set("nodePadding", 2);

interface ISunburstDataObject {
  name?: string;
  value?: number;
  children?: ISunburstDataObject[];
}

sunburst.data.setAll([{
  name: "Root",
  children: [
    {
      name: "Category A",
      children: [
        { name: "A1", value: 100 },
        { name: "A2", value: 60 }
      ]
    },
    {
      name: "Category B",
      children: [
        { name: "B1", value: 135 },
        { name: "B2", value: 98 },
        { name: "B3", value: 56 }
      ]
    },
    {
      name: "Category C",
      children: [
        { name: "C1", value: 78 },
        { name: "C2", value: 43 }
      ]
    }
  ]
}]);

sunburst.nodes.template.setAll({
  toggleKey: "disabled"
});

sunburst.slices.template.setAll({
  strokeWidth: 2,
  stroke: am5.color(0xffffff),
  cornerRadius: 4,
  tooltipText: "{category}: {valuePercentTotal.formatNumber('0.00')}%"
});

sunburst.labels.template.setAll({
  text: "{category}",
  fontSize: 12,
  textType: "radial", // or "circular"
  centerX: 0,
  centerY: 0
});

selectDataItem(dataItem: DataItem<ISunburstDataItem>): void

getDataItemById(id: string): DataItem<ISunburstDataItem> | undefined

enableDataItem(
  dataItem: DataItem<ISunburstDataItem>,
  maxDepth?: number,
  depth?: number,
  duration?: number
): void

disableDataItem(
  dataItem: DataItem<ISunburstDataItem>,
  duration?: number
): void

addChildData(
  dataItem: DataItem<ISunburstDataItem>,
  data: Array<any>
): void

hoverDataItem(dataItem: DataItem<ISunburstDataItem>): void

unhoverDataItem(dataItem: DataItem<ISunburstDataItem>): void

sunburst.events.on("dataitemselected", (ev) => {
  console.log("Selected:", ev.dataItem);
});