// A sunburst reads the SAME `series` + `drilldown.series` config a drilldown
// donut uses, so an existing drilldown chart becomes a sunburst by flipping
// `chart.type`. Each level is tinted with shades of its parent slice's hue.
var deviceColors = ['#1565C0', '#2E7D32', '#EF6C00'] // Mobile / Desktop / Tablet
var mobileOsColors = ['#0D47A1', '#1976D2', '#64B5F6'] // Mobile by OS
var iosColors = ['#1565C0', '#42A5F5', '#90CAF9'] // iOS versions
var desktopOsColors = ['#1B5E20', '#388E3C', '#66BB6A'] // Desktop by OS
var tabletOsColors = ['#E65100', '#FB8C00'] // Tablet by OS

var options = {
  series: [
    {
      name: 'Devices',
      data: [
        { x: 'Mobile', y: 55, drilldown: 'mobile' },
        { x: 'Desktop', y: 33, drilldown: 'desktop' },
        { x: 'Tablet', y: 12, drilldown: 'tablet' },
      ],
    },
  ],
  chart: {
    type: 'sunburst',
    height: 480,
  },
  colors: deviceColors,
  legend: {
    position: 'bottom',
  },
  title: {
    text: 'Website traffic by device',
    align: 'left',
  },
  subtitle: {
    text: 'The same series + drilldown.series config as a drilldown donut, rendered as one sunburst.',
    align: 'left',
  },
  plotOptions: {
    sunburst: {
      innerSize: '20%',
    },
  },
  stroke: {
    width: 1,
    colors: ['#fff'],
  },
  drilldown: {
    series: [
      {
        id: 'mobile',
        name: 'Mobile by OS',
        colors: mobileOsColors,
        data: [
          { x: 'iOS', y: 30, drilldown: 'mobile-ios' },
          { x: 'Android', y: 23 },
          { x: 'Other', y: 2 },
        ],
      },
      {
        id: 'mobile-ios',
        name: 'iOS Versions',
        colors: iosColors,
        data: [
          { x: 'iOS 17', y: 18 },
          { x: 'iOS 16', y: 9 },
          { x: 'iOS 15', y: 3 },
        ],
      },
      {
        id: 'desktop',
        name: 'Desktop by OS',
        colors: desktopOsColors,
        data: [
          { x: 'Windows', y: 20 },
          { x: 'macOS', y: 10 },
          { x: 'Linux', y: 3 },
        ],
      },
      {
        id: 'tablet',
        name: 'Tablet by OS',
        colors: tabletOsColors,
        data: [
          { x: 'iPadOS', y: 8 },
          { x: 'Android', y: 4 },
        ],
      },
    ],
  },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()