Sunburst Chart in JS | ECharts x D3 x Plotly

I just wanted to plot my data on a sunburst chart. I assumed choosing a library would be one ChatGPT question away... but it wasn't. There were at least a dozen of alternatives to consider.

Spoiler alert: I went with Apache Echarts. Here's why.

1. D3.js - the safe choice

D3.js is the most popular and familiar option. I’ve used it before. But could it handle a sunburst chart cleanly?

I found a demo here, but it seemed too complex with generating the arc, computing the layout, etc, it didn’t feel like the obvious choice for this project.

2. Plotly - ChatGPT's recommendation

Plotly does support sunburst charts, but the transitions and label visibility looked too clumsy:

3. ECharts 👑

Apache Echarts is free, simple to use, and the default demos already looked great. The data structure is clean and intuitive, smooth transitions, minimal config required. It was the clear winner.

Quick proof of concept — Claude + ECharts

Before setting up the full project (I wrote earlier about choosing Vite), I wanted a quick proof of concept.

So I pasted the data into Claude and said:
“Using ECharts, visualize this data as a sunburst chart.”

After 2 minutes I had a functioning sunburst chart with my data.

Of course, the real project needed more refinement, customization, and performance work.
But having a working prototype in minutes made the choice obvious.

Data format:

const baseData = [
  {
    name: 'Parent 1',
    children: [
      {
        name: 'Child 1',
        children: [
          { name: 'Grandchild 1', value: 1 },
          { name: 'Grandchild 2', value: 1 },
          ...
        ]
      },
  ...
]

To see the final result: the repo