サンバーストチャートライブラリ比較

'use client';
// ApexSunburstChart.tsx（apexcharts 8.7 / react-apexcharts 2.2。ページ側では next/dynamic の ssr: false で読み込む）

// v8 から sunburst は既定のバンドルに入っていない。この import で登録する
// （無いとコンソールにエラーが出て、凡例だけが描かれる）
import 'apexcharts/sunburst';
import Chart from 'react-apexcharts';
import type { ApexOptions } from 'apexcharts';

// 階層は children で入れ子にする（name / value は x / y の別名として読まれる）
const data = [
  {
    name: '自然検索', color: '#60a5fa',
    children: [
      {
        name: 'Google', color: '#93c5fd',
        children: [
          { name: 'Google 検索', value: 7200, color: '#bfdbfe' },
          { name: 'Google Discover', value: 1100, color: '#bfdbfe' },
        ],
      },
      { name: 'Yahoo!', value: 1300, color: '#93c5fd' },
    ],
  },
  { name: '直接', value: 2700, color: '#94a3b8' },
  {
    name: 'SNS', color: '#a78bfa',
    children: [
      { name: 'X', value: 1500, color: '#c4b5fd' },
      { name: 'Instagram', value: 700, color: '#c4b5fd' },
    ],
  },
];

const options: ApexOptions = {
  chart: { type: 'sunburst', toolbar: { show: false } },
  plotOptions: {
    sunburst: {
      innerSize: '24%',
      borderRadius: 4, // 扇の角丸
      spacing: 2, // 扇どうしの隙間（px）
      zoomOnClick: true, // 扇のクリックでその枝に拡大し、パンくずで戻る（既定で true）
      // ラベルの色は1色だけ。塗りを明るめにそろえて濃い文字にする
      dataLabels: { minAngleToShow: 18, style: { colors: ['#1e293b'], fontSize: '11px' } },
    },
  },
  drilldown: { breadcrumb: { rootLabel: '全体' } }, // パンくずの先頭（既定は All）
  legend: { position: 'bottom' }, // 凡例のクリックで1階層目の枝を外せる
  tooltip: {
    // 既定は割合を英語（of parent / of total）で足す。custom は hover した扇と割合を受け取る
    custom: ({ node, percentOfParent, percentOfTotal }) =>
      node
        ? `<div style="padding:6px 10px">${node.name}：<b>${node.value.toLocaleString()}</b><br/>親の ${percentOfParent}%・全体の ${percentOfTotal}%</div>`
        : null,
  },
};

export default function ApexSunburstChart() {
  // react-apexcharts の型では type に sunburst が無い（v8 の新しい種別に型が追いついていない）。
  // type を省くと既定の line で上書きされるので、値は渡したうえで型だけ外す
  return <Chart type={'sunburst' as never} series={[{ data }]} options={options} height={360} width="100%" />;
}

'use client';
// EChartsSunburstChart.tsx（echarts 6.1 / echarts-for-react 3.0）
import ReactECharts from 'echarts-for-react';

// 階層は children で入れ子にする。色は itemStyle.color で渡す
const data = [
  {
    name: '自然検索', itemStyle: { color: '#60a5fa' },
    children: [
      {
        name: 'Google', itemStyle: { color: '#93c5fd' },
        children: [
          { name: 'Google 検索', value: 7200, itemStyle: { color: '#bfdbfe' } },
          { name: 'Google Discover', value: 1100, itemStyle: { color: '#bfdbfe' } },
        ],
      },
      { name: 'Yahoo!', value: 1300, itemStyle: { color: '#93c5fd' } },
    ],
  },
  { name: '直接', value: 2700, itemStyle: { color: '#94a3b8' } },
  {
    name: 'SNS', itemStyle: { color: '#a78bfa' },
    children: [
      { name: 'X', value: 1500, itemStyle: { color: '#c4b5fd' } },
      { name: 'Instagram', value: 700, itemStyle: { color: '#c4b5fd' } },
    ],
  },
];

const option = {
  tooltip: {
    confine: true, // グラフの枠の中に収める
    // treePathInfo に根からの経路が入る（先頭は名前の無い仮想の根）
    formatter: (p: { value: number; treePathInfo: { name: string }[] }) =>
      `${p.treePathInfo.slice(1).map((n) => n.name).join(' › ')}<br/><b>${p.value.toLocaleString()}</b> セッション`,
  },
  series: [
    {
      type: 'sunburst',
      data,
      radius: ['14%', '92%'],
      nodeClick: 'rootToNode', // 扇のクリックでその扇を中心に（既定）。中心の円のクリックで1つ上へ
      emphasis: { focus: 'ancestor' }, // hover した扇の祖先だけを強調し、ほかは薄くする
      itemStyle: { borderRadius: 4, borderWidth: 2, borderColor: '#fafafa' },
      label: { color: '#1e293b', fontSize: 11, minAngle: 12, rotate: 'radial' },
      labelLayout: { hideOverlap: true }, // 重なったラベルは隠す
      // levels[0] は掘り下げたときに中心に出る「戻る」円（既定は名前の無いグレーの円）
      levels: [{ itemStyle: { color: '#e4e4e7' }, label: { formatter: '戻る', color: '#3f3f46', rotate: 0 } }],
    },
  ],
};

export default function EChartsSunburstChart() {
  return <ReactECharts option={option} style={{ height: 360 }} />;
}

'use client';
// NivoSunburstChart.tsx（@nivo/sunburst 0.99）
import { useState } from 'react';
import { ResponsiveSunburst, type SunburstCustomLayerProps } from '@nivo/sunburst';

type Node = { name: string; value?: number; color: string; children?: Node[] };

// Nivo には根を1つだけ渡す
const root: Node = {
  name: '全体', color: '#94a3b8',
  children: [
    {
      name: '自然検索', color: '#60a5fa',
      children: [
        {
          name: 'Google', color: '#93c5fd',
          children: [
            { name: 'Google 検索', value: 7200, color: '#bfdbfe' },
            { name: 'Google Discover', value: 1100, color: '#bfdbfe' },
          ],
        },
        { name: 'Yahoo!', value: 1300, color: '#93c5fd' },
      ],
    },
    { name: '直接', value: 2700, color: '#94a3b8' },
    { name: 'SNS', color: '#a78bfa', children: [{ name: 'X', value: 1500, color: '#c4b5fd' }] },
  ],
};

// 根からの name の並びをたどって、表示中のノードを返す
const nodeAt = (path: string[]) =>
  path.reduce<Node>((node, name) => node.children?.find((c) => c.name === name) ?? node, root);

export default function NivoSunburstChart() {
  const [path, setPath] = useState<string[]>([]); // [] のときは全体を表示する
  const current = nodeAt(path);

  // 中心の穴に、表示中のノードの名前を描くレイヤー（fill: currentColor で文字色を継承する）
  const Center = ({ centerX, centerY }: SunburstCustomLayerProps<Node>) => (
    <text x={centerX} y={centerY} textAnchor="middle" dominantBaseline="central" style={{ fill: 'currentColor', fontSize: 13 }}>
      {current.name}
    </text>
  );

  return (
    <div style={{ height: 360 }}>
      {path.length > 0 && <button onClick={() => setPath(path.slice(0, -1))}>← 1つ上へ</button>}
      <ResponsiveSunburst<Node>
        data={current}
        id="name"
        value="value"
        valueFormat={(v) => `${v.toLocaleString()} セッション`}
        cornerRadius={4}
        borderWidth={2}
        borderColor="#ffffff" // 背景と同じ色にすると、扇の間が隙間に見える
        // 根を差し替えても色が変わらないよう、データの色を使い、親からの継承を切る
        colors={(d) => d.data.color}
        inheritColorFromParent={false}
        enableArcLabels
        arcLabel="id"
        arcLabelsSkipAngle={24} // ラベルは切り詰めも回転もしないので、細い扇では出さない
        arcLabelsTextColor="#1e293b"
        // d.path は自分から根までの name の並び。子を持つ扇なら、その扇を根にする
        onClick={(d) => {
          if (d.data.children) setPath([...path, ...d.path.slice(0, -1).reverse().map(String)]);
        }}
        transitionMode="pushIn"
        layers={['arcs', 'arcLabels', Center]}
      />
    </div>
  );
}

'use client';
// MantineSunburstChart.tsx（@mantine/charts 9.7。SunburstChart は 9.5 から）
import { useState } from 'react';
import { MantineProvider } from '@mantine/core';
import { SunburstChart, type SunburstChartData } from '@mantine/charts';
import '@mantine/core/styles.css';
import '@mantine/charts/styles.css';

const data: SunburstChartData[] = [
  {
    name: '自然検索', color: '#60a5fa',
    children: [
      {
        name: 'Google', color: '#93c5fd',
        children: [
          { name: 'Google 検索', value: 7200, color: '#bfdbfe' },
          { name: 'Google Discover', value: 1100, color: '#bfdbfe' },
        ],
      },
      { name: 'Yahoo!', value: 1300, color: '#93c5fd' },
    ],
  },
  { name: '直接', value: 2700, color: '#94a3b8' },
  { name: 'SNS', color: '#a78bfa', children: [{ name: 'X', value: 1500, color: '#c4b5fd' }] },
];

// name までの経路（根からの name の並び）を探す。name はツリー全体で一意にしておく
const findPath = (list: SunburstChartData[], name: string): string[] => {
  for (const node of list) {
    if (node.name === name) return [node.name];
    const rest = findPath(node.children ?? [], name);
    if (rest.length) return [node.name, ...rest];
  }
  return [];
};

// 経路をたどって、表示する枝（子の配列）を返す
const childrenAt = (path: string[]) =>
  path.reduce<SunburstChartData[]>((list, name) => list.find((n) => n.name === name)?.children ?? list, data);

export default function MantineSunburstChart() {
  const [path, setPath] = useState<string[]>([]); // [] のときは全体を表示する

  return (
    <MantineProvider>
      {path.length > 0 && <button onClick={() => setPath(path.slice(0, -1))}>← 1つ上へ</button>}
      <SunburstChart
        data={childrenAt(path)}
        size={300}
        gap={2}
        // 12時の位置から時計回り。endAngle は終わりの角度ではなく、startAngle から回す量として扱われる
        startAngle={90}
        endAngle={-360}
        valueFormatter={(v) => `${v.toLocaleString()} セッション`} // ツールチップにだけ効く
        // クリックは recharts の SunburstChart に渡す（node は data の要素）
        sunburstChartProps={{
          onClick: (node) => {
            if (node.children?.length) setPath(findPath(data, node.name));
          },
        }}
      />
    </MantineProvider>
  );
}