DonutChart

Donut chart component

Import

Source

View source code

Docs

Edit this page

Package

@mantine/charts

Usage

DonutChart is based on PieChart recharts component:

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

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

Segments labels

Set withLabels prop to display labels next to each segment:

With labels line

Labels type

Value

Percent

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

function Demo() {
  return <DonutChart withLabelsLine labelsType="value" withLabels data={data} />;
}

Set size prop to control width and height of the chart. Note that if withLabels prop is set, the chart height is automatically increased by 80px to make room for labels. You can override this behavior by setting h style prop.

Size

Thickness

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

function Demo() {
  return <DonutChart size={160} thickness={20} data={data} />;
}

Padding angle

Use paddingAngle prop to control the space between segments:

Padding angle

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

function Demo() {
  return <DonutChart paddingAngle={10} data={data} />;
}

Segment color

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.

Color

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

function Demo() {
  return (
    <DonutChart
      data={[
        { name: 'USA', value: 400, color: 'blue' },
        { name: 'Other', value: 200, color: 'gray.6' },
      ]}
    />
  );
}

Tooltip data source

By default, the tooltip displays data for all segments when hovered over any segment. To display data only for the hovered segment, set tooltipDataSource="segment":

Data only for hovered segment

Data only for all segments

import { Group, Text } from '@mantine/core';
import { DonutChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <Group gap={50}>
      <div>
        <Text fz="xs" mb="sm" ta="center">
          Data only for hovered segment
        </Text>
        <DonutChart data={data} tooltipDataSource="segment" mx="auto" />
      </div>

      <div>
        <Text fz="xs" mb="sm" ta="center">
          Data only for all segments
        </Text>
        <DonutChart data={data} mx="auto" />
      </div>
    </Group>
  );
}

Without tooltip

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

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

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

Chart label

To display a label in the center of the chart, use chartLabel prop. It accepts a string or a number:

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

function Demo() {
  return <DonutChart data={data} chartLabel="Users by country" />;
}

Start and end angle

Use startAngle and endAngle props to control the start and end angle of the chart. For example, to display a half-circle chart, set startAngle={180} and endAngle={0}:

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

function Demo() {
  return <DonutChart data={data} startAngle={180} endAngle={0} />;
}

Note that even when startAngle and endAngle props are set, the chart still takes the same amount of space as if it was a full circle.

Segments stroke

Use strokeWidth prop to control the width of the stroke around each segment:

Stroke width

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

function Demo() {
  return <DonutChart strokeWidth={1} data={data} />;
}

To change color of the stroke, use strokeColor prop. 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.

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

function Demo() {
  return <DonutChart data={[]} strokeColor="red.5" />;
}

By default, segments stroke color is the same as the background color of the body element (--mantine-color-body CSS variable). If you want to change it depending on the color scheme, define CSS variable and pass it to the strokeColor prop:

import { DonutChart } from '@mantine/charts';
import { data } from './data';
import classes from './Demo.module.css';

function Demo() {
  return (
    <div className={classes.root}>
      <DonutChart data={data} strokeColor="var(--card-bg)" />
    </div>
  );
}

CompositeChart

PieChart

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog GitHub Releases

Community

Chat on Discord Follow on X Follow on Github GitHub discussions

Project

Mantine UI Help Center Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community Follow Mantine on X