1. Components
  2. Donut Chart

Components

Donut Chart

A donut chart displays quantitative information through a circle-like visualization.

donut variant

pie variant

   

Import DonutChart

Tremor exports one component to create a donut chart.

import { DonutChart } from "@tremor/react";

Anatomy

How the basic component is pieced together displaying all properties with their default values.

import { DonutChart } from "@tremor/react";

export default () => (
  <DonutChart
    data={[]}
    category="value"
    dataKey="name"
    colors={[ "blue", ... ]}
    variant="donut"
    valueFormatter={undefined}
    label={undefined}
    showLabel={true}
    showTooltip={true}
    showAnimation={true}
    height="h-44"
    marginTop="mt-0"
  />
);

Usage example

The example below shows a composition of a Card and Title with the DonutChart component.

Sales

import { Card, Title, DonutChart } from '@tremor/react';

const cities = [
    {
        name: 'New York',
        sales: 9800,
    },
    {
        name: 'London',
        sales: 4567,
    },
    {
        name: 'Hong Kong',
        sales: 3908,
    },
    {
        name: 'San Francisco',
        sales: 2400,
    },
    {
        name: 'Singapore',
        sales: 1908,
    },
    {
        name: 'Zurich',
        sales: 1398,
    },
];

const valueFormatter = (number: number) => (
    `$ ${Intl.NumberFormat('us').format(number).toString()}`
);

export default () => (
    <Card maxWidth="max-w-lg">
        <Title>Sales by City</Title>
        <DonutChart
            data={ cities }
            category="sales"
            dataKey="name"
            valueFormatter={ valueFormatter }
            marginTop="mt-6"
            colors={["slate", "violet", "indigo", "rose", "cyan", "amber"]}
        />
    </Card>
);

API Reference: DonutChart

data
Description
The source data, formatted as a JSON-array
Type
Object
Default
-
Values
variant
Description
Controls the type of the chart.
Type
string
Default
donut
Values
donut, pie
categoryoptional
Description
Sets the name of the key containing the quantitative chart values.
Type
string
Default
value
Values
dataKeyoptional
Description
Sets the key to map the data to the chart.
Type
string
Default
name
Values
colorsoptional
Description
Change the default colors.
Type
array
Default
-
Values
E.g. ['blue', 'indigo']
valueFormatteroptional
Description
Determines the formatting of the displayed values.
Type
function
Default
Values
labeloptional
Description
Sets the text element which is displayed in the center of the donut chart. If fill is set to true, the label is not displayed.
Type
string
Default
Values
showLabeloptional
Description
Controls the visibility of the text element displayed in the center of the donut chart.
Type
boolean
Default
false
Values
true, false
showTooltipoptional
Description
Controls the visibility of the tooltip.
Type
boolean
Default
true
Values
true, false
showAnimationoptional
Description
Sets an animation to the chart when it is loaded.
Type
boolean
Default
true
Values
true, false
heightoptional
Description
Defines height of the chart container.
Type
number
Default
h-44
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0