# SunburstChart
Package: @thinker-core/mantine-charts
Import: import { SunburstChart } from '@thinker-core/mantine-charts';
Description: Sunburst chart component for hierarchical data

## Usage

`SunburstChart` is based on the [SunburstChart recharts component](https://recharts.org/en-US/api/SunburstChart).
It displays hierarchical data as concentric rings, similar to a treemap plotted in polar coordinates:

```tsx
// Demo.tsx
import { SunburstChart } from '@thinker-core/mantine-charts';
import { data } from './data';

function Demo() {
  return <SunburstChart data={data} />;
}

// data.ts
export const data = [
  { name: 'Analytics', value: 100, color: 'raspberry.10' },
  {
    name: 'DevOps',
    color: 'bubblegum.10',
    children: [
      { name: 'Docker', value: 80 },
      { name: 'Kubernetes', value: 50 },
    ],
  },
  {
    name: 'Backend',
    color: 'peppermint.10',
    children: [
      { name: 'Node', value: 150 },
      {
        name: 'Python',
        children: [
          { name: 'Django', value: 110 },
          { name: 'FastAPI', value: 60 },
        ],
      },
      { name: 'Go', value: 50 },
    ],
  },
  {
    name: 'Frontend',
    color: 'ocean.10',
    children: [
      {
        name: 'React',
        children: [
          {
            name: 'Frameworks',
            children: [
              { name: 'Next.js', value: 150 },
              { name: 'Remix', value: 40 },
            ],
          },
          { name: 'CRA', value: 20 },
        ],
      },
      { name: 'Vue', value: 90 },
      { name: 'Svelte', value: 30 },
    ],
  },
];
```


## Data format

`SunburstChart` expects an array of objects. Each object must have a `name` and `color` property.
Leaf nodes must have a `value` property. Parent nodes can have a `children` array:

```tsx
export const data = [
  {
    name: 'Frontend',
    color: 'ocean.10',
    children: [
      { name: 'React', value: 400 },
      { name: 'Vue', value: 200 },
      { name: 'Angular', value: 150 },
    ],
  },
  {
    name: 'Backend',
    color: 'peppermint.10',
    children: [
      { name: 'Node', value: 300 },
      { name: 'Python', value: 250 },
    ],
  },
];
```

## Node color

You can reference colors from [theme](https://mantine.blockfint.com/llms/theming-theme-object.md) the same way as in
other components, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS
color value is also accepted. Children inherit the color of their parent node.

```tsx
import { SunburstChart } from '@thinker-core/mantine-charts';

const data = [
  { name: 'Sales', value: 500, color: 'lavender.10' },
  { name: 'Marketing', value: 300, color: 'bubblegum.10' },
  { name: 'Engineering', value: 400, color: 'raspberry.10' },
  { name: 'Support', value: 200, color: 'cherry.10' },
];

function Demo() {
  return <SunburstChart data={data} />;
}
```


## Stroke color

Use `strokeColor` to change the color of the stroke around each sector:

```tsx
// Demo.tsx
import { SunburstChart } from '@thinker-core/mantine-charts';
import { data } from './data';

function Demo() {
  return <SunburstChart data={data} strokeColor="smokey.3" />;
}

// data.ts
export const data = [
  { name: 'Analytics', value: 100, color: 'raspberry.10' },
  {
    name: 'DevOps',
    color: 'bubblegum.10',
    children: [
      { name: 'Docker', value: 80 },
      { name: 'Kubernetes', value: 50 },
    ],
  },
  {
    name: 'Backend',
    color: 'peppermint.10',
    children: [
      { name: 'Node', value: 150 },
      {
        name: 'Python',
        children: [
          { name: 'Django', value: 110 },
          { name: 'FastAPI', value: 60 },
        ],
      },
      { name: 'Go', value: 50 },
    ],
  },
  {
    name: 'Frontend',
    color: 'ocean.10',
    children: [
      {
        name: 'React',
        children: [
          {
            name: 'Frameworks',
            children: [
              { name: 'Next.js', value: 150 },
              { name: 'Remix', value: 40 },
            ],
          },
          { name: 'CRA', value: 20 },
        ],
      },
      { name: 'Vue', value: 90 },
      { name: 'Svelte', value: 30 },
    ],
  },
];
```


## Chart size

Use `size` prop to control the width and height of the chart:

```tsx
// Demo.tsx
import { SunburstChart } from '@thinker-core/mantine-charts';
import { data } from './data';

function Demo() {
  return <SunburstChart data={data} size={400} />;
}

// data.ts
export const data = [
  { name: 'Analytics', value: 100, color: 'raspberry.10' },
  {
    name: 'DevOps',
    color: 'bubblegum.10',
    children: [
      { name: 'Docker', value: 80 },
      { name: 'Kubernetes', value: 50 },
    ],
  },
  {
    name: 'Backend',
    color: 'peppermint.10',
    children: [
      { name: 'Node', value: 150 },
      {
        name: 'Python',
        children: [
          { name: 'Django', value: 110 },
          { name: 'FastAPI', value: 60 },
        ],
      },
      { name: 'Go', value: 50 },
    ],
  },
  {
    name: 'Frontend',
    color: 'ocean.10',
    children: [
      {
        name: 'React',
        children: [
          {
            name: 'Frameworks',
            children: [
              { name: 'Next.js', value: 150 },
              { name: 'Remix', value: 40 },
            ],
          },
          { name: 'CRA', value: 20 },
        ],
      },
      { name: 'Vue', value: 90 },
      { name: 'Svelte', value: 30 },
    ],
  },
];
```


## Gap

Use `gap` prop to control the spacing between sectors and rings:

```tsx
// Demo.tsx
import { SunburstChart } from '@thinker-core/mantine-charts';
import { data } from './data';

function Demo() {
  return <SunburstChart data={data}  gap={1} />;
}

// data.ts
export const data = [
  { name: 'Analytics', value: 100, color: 'raspberry.10' },
  {
    name: 'DevOps',
    color: 'bubblegum.10',
    children: [
      { name: 'Docker', value: 80 },
      { name: 'Kubernetes', value: 50 },
    ],
  },
  {
    name: 'Backend',
    color: 'peppermint.10',
    children: [
      { name: 'Node', value: 150 },
      {
        name: 'Python',
        children: [
          { name: 'Django', value: 110 },
          { name: 'FastAPI', value: 60 },
        ],
      },
      { name: 'Go', value: 50 },
    ],
  },
  {
    name: 'Frontend',
    color: 'ocean.10',
    children: [
      {
        name: 'React',
        children: [
          {
            name: 'Frameworks',
            children: [
              { name: 'Next.js', value: 150 },
              { name: 'Remix', value: 40 },
            ],
          },
          { name: 'CRA', value: 20 },
        ],
      },
      { name: 'Vue', value: 90 },
      { name: 'Svelte', value: 30 },
    ],
  },
];
```


## Labels

Set `withLabels` to display value labels inside each sector. It is recommended
to increase `size` to give labels enough space:

```tsx
// Demo.tsx
import { SunburstChart } from '@thinker-core/mantine-charts';
import { data } from './data';

function Demo() {
  return <SunburstChart data={data} withLabels size={400} />;
}

// data.ts
export const data = [
  { name: 'Analytics', value: 100, color: 'raspberry.10' },
  {
    name: 'DevOps',
    color: 'bubblegum.10',
    children: [
      { name: 'Docker', value: 80 },
      { name: 'Kubernetes', value: 50 },
    ],
  },
  {
    name: 'Backend',
    color: 'peppermint.10',
    children: [
      { name: 'Node', value: 150 },
      {
        name: 'Python',
        children: [
          { name: 'Django', value: 110 },
          { name: 'FastAPI', value: 60 },
        ],
      },
      { name: 'Go', value: 50 },
    ],
  },
  {
    name: 'Frontend',
    color: 'ocean.10',
    children: [
      {
        name: 'React',
        children: [
          {
            name: 'Frameworks',
            children: [
              { name: 'Next.js', value: 150 },
              { name: 'Remix', value: 40 },
            ],
          },
          { name: 'CRA', value: 20 },
        ],
      },
      { name: 'Vue', value: 90 },
      { name: 'Svelte', value: 30 },
    ],
  },
];
```


## Disable tooltip

To disable the tooltip, set `withTooltip={false}`:

```tsx
// Demo.tsx
import { SunburstChart } from '@thinker-core/mantine-charts';
import { data } from './data';

function Demo() {
  return <SunburstChart data={data} withTooltip={false} />;
}

// data.ts
export const data = [
  { name: 'Analytics', value: 100, color: 'raspberry.10' },
  {
    name: 'DevOps',
    color: 'bubblegum.10',
    children: [
      { name: 'Docker', value: 80 },
      { name: 'Kubernetes', value: 50 },
    ],
  },
  {
    name: 'Backend',
    color: 'peppermint.10',
    children: [
      { name: 'Node', value: 150 },
      {
        name: 'Python',
        children: [
          { name: 'Django', value: 110 },
          { name: 'FastAPI', value: 60 },
        ],
      },
      { name: 'Go', value: 50 },
    ],
  },
  {
    name: 'Frontend',
    color: 'ocean.10',
    children: [
      {
        name: 'React',
        children: [
          {
            name: 'Frameworks',
            children: [
              { name: 'Next.js', value: 150 },
              { name: 'Remix', value: 40 },
            ],
          },
          { name: 'CRA', value: 20 },
        ],
      },
      { name: 'Vue', value: 90 },
      { name: 'Svelte', value: 30 },
    ],
  },
];
```



#### Props

**SunburstChart props**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| children | React.ReactNode | - | Additional elements rendered inside `SunburstChart` component |
| data | SunburstChartData[] | required | Data used to render chart |
| dataKey | string | - | Key in data object for the value |
| endAngle | number | - | Angle in degrees at which the chart should end |
| gap | number | - | Gap between sectors and rings in px |
| innerRadius | number | - | Controls the radius of the inner circle at the center of the chart |
| size | number | - | Controls chart width and height |
| startAngle | number | - | Angle in degrees from which the chart should start |
| strokeColor | MantineColor | - | Controls color of the sectors stroke, by default depends on color scheme |
| sunburstChartProps | Partial<Omit<SunburstChartProps, "data" \| "ref" \| "dataKey">> | - | Props passed down to recharts `SunburstChart` component |
| tooltipAnimationDuration | number | - | Tooltip animation duration in ms |
| tooltipProps | RechartsProps | - | Props passed down to `Tooltip` recharts component |
| ts | StyleProp<"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "d2" \| "d1" \| "d3" \| "d4" \| "d5" \| "d6" \| "d7" \| "d8" \| "d9" \| "d10" \| "h7" \| "h8" \| "h9" \| "h10" \| "t2" \| "t1" \| "t3" \| "t4" \| "t5" \| "t6" \| ... 63 more ... \| "lu10"> | - | TextStyle, custom text styles that will override fz, lh, fw, td |
| valueFormatter | (value: number) => string | - | A function to format values inside the tooltip and labels |
| withLabels | boolean | - | Determines whether value labels are displayed inside each sector |
| withTooltip | boolean | - | Determines whether the tooltip should be displayed when a node is hovered |


#### Styles API

SunburstChart component supports Styles API. With Styles API, you can customize styles of any inner element. Follow the documentation to learn how to use CSS modules, CSS variables and inline styles to get full control over component styles.

**SunburstChart selectors**

| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | .mantine-SunburstChart-root | Root element |
| tooltip | .mantine-SunburstChart-tooltip | Tooltip root element |
| tooltipBody | .mantine-SunburstChart-tooltipBody | Tooltip wrapper around all items |
| tooltipItem | .mantine-SunburstChart-tooltipItem | Tooltip item representing data series |
| tooltipItemBody | .mantine-SunburstChart-tooltipItemBody | Tooltip item wrapper around item color and name |
| tooltipItemColor | .mantine-SunburstChart-tooltipItemColor | Tooltip item color |
| tooltipItemName | .mantine-SunburstChart-tooltipItemName | Tooltip item name |
| tooltipItemData | .mantine-SunburstChart-tooltipItemData | Tooltip item data |
| tooltipLabel | .mantine-SunburstChart-tooltipLabel | Label of the tooltip |

**SunburstChart CSS variables**

| Selector | Variable | Description |
|----------|----------|-------------|
| root | --chart-stroke-color | Controls color of the chart segments stroke |
| root | --chart-size | Controls width and height of the chart |