Sunburst + column ring

Quarters and months as a sunburst; hovering a quarter highlights its three months on the outer ring.

Ring & inner layers

Chart type
Radial Column radialColumn
Tier
Premium
Collection
Radial Column · Ring & inner layers
Render
Live, site theme
View .md Agent setup
LIVE/radial-column/sunburst3 of 32 in Radial Column

Configuration

Raw Standalone
const options = {
  "chart": {
    "type": "radialColumn",
    "height": 500,
    "toolbar": {
      "show": false
    }
  },
  "series": [
    {
      "name": "Revenue",
      "data": [
        42,
        38,
        51,
        47,
        55,
        61,
        58,
        66,
        72,
        69,
        78,
        84
      ]
    }
  ],
  "xaxis": {
    "categories": [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ]
  },
  "plotOptions": {
    "radialColumn": {
      "fill": {
        "type": "value",
        "stops": [
          "#3b82f6",
          "#8b5cf6",
          "#d946ef"
        ]
      },
      "layers": [
        {
          "type": "sunburst",
          "name": "By quarter",
          "data": [
            {
              "x": "Q1",
              "children": [
                {
                  "x": "Jan",
                  "y": 42
                },
                {
                  "x": "Feb",
                  "y": 38
                },
                {
                  "x": "Mar",
                  "y": 51
                }
              ]
            },
            {
              "x": "Q2",
              "children": [
                {
                  "x": "Apr",
                  "y": 47
                },
                {
                  "x": "May",
                  "y": 55
                },
                {
                  "x": "Jun",
                  "y": 61
                }
              ]
            },
            {
              "x": "Q3",
              "children": [
                {
                  "x": "Jul",
                  "y": 58
                },
                {
                  "x": "Aug",
                  "y": 66
                },
                {
                  "x": "Sep",
                  "y": 72
                }
              ]
            },
            {
              "x": "Q4",
              "children": [
                {
                  "x": "Oct",
                  "y": 69
                },
                {
                  "x": "Nov",
                  "y": 78
                },
                {
                  "x": "Dec",
                  "y": 84
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()

This example uses Premium modules. Compare licences · Embedding in a distributed product?