SunburstChart | Mantine

Usage

SunburstChart is based on the SunburstChart recharts component. It displays hierarchical data as concentric rings, similar to a treemap plotted in polar coordinates:

import { SunburstChart } from '@mantine/charts';
import { data } from './data';

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

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:

export const data = [
  {
    name: 'Frontend',
    color: 'blue.6',
    children: [
      { name: 'React', value: 400 },
      { name: 'Vue', value: 200 },
      { name: 'Angular', value: 150 },
    ],
  },
  {
    name: 'Backend',
    color: 'teal.6',
    children: [
      { name: 'Node', value: 300 },
      { name: 'Python', value: 250 },
    ],
  },
];

You can reference colors from theme 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.

import { SunburstChart } from '@mantine/charts';

const data = [
  { name: 'Sales', value: 500, color: 'violet.6' },
  { name: 'Marketing', value: 300, color: 'grape.6' },
  { name: 'Engineering', value: 400, color: 'pink.6' },
  { name: 'Support', value: 200, color: 'red.6' },
];

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

Stroke color

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

import { SunburstChart } from '@mantine/charts';
import { data } from './data';

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

Chart size

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

import { SunburstChart } from '@mantine/charts';
import { data } from './data';

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

Gap

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

Gap

import { SunburstChart } from '@mantine/charts';
import { data } from './data';

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

Labels

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

import { SunburstChart } from '@mantine/charts';
import { data } from './data';

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

Disable tooltip

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

import { SunburstChart } from '@mantine/charts';
import { data } from './data';

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

Treemap

SankeyChart