1. Components
  2. Donut Chart

Components

Donut Chart

A donut chart displays quantitative information through a circular visualization.

donut variant

pie variant

   

Import DonutChart

Tremor exports one component to create a donut chart.

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

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 DonutChart = () => (
  <Card className="max-w-lg">
    <Title>Sales</Title>
    <DonutChart
      className="mt-6"
      data={cities}
      category="sales"
      index="name"
      valueFormatter={valueFormatter}
      colors={["slate", "violet", "indigo", "rose", "cyan", "amber"]}
    />
  </Card>
);

Usage example with on click event

The example below shows an interacive chart using the onValueChange prop.

Sales

null
Returned upon onValueChange
import { Card, Title, DonutChart } from "@tremor/react";
import React from "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 const DonutChartUsageExample2 = () => {
  const [value, setValue] = React.useState(null);
  return (
    <>
      <Card className="mx-auto">
        <Title>Sales</Title>
        <DonutChart
          className="mt-6"
          data={cities}
          category="sales"
          index="name"
          valueFormatter={valueFormatter}
          colors={["rose", "yellow", "orange", "indigo", "blue", "emerald"]}
          onValueChange={(v) => setValue(v)}
        />
      </Card>
      <pre>{JSON.stringify(value)}</pre>
    </>
  );
};

Theming

Donut Chart

Label in center (donut only)
colorstremor-content-emphasis

Chart Tooltip

Border color
colorstremor-border-DEFAULT
Text color numbers
colorstremor-content-emphasis
Color ring around bulletpoint
colorstremor-background-DEFAULT
Background color
colorstremor-background-default
Text color label
colorstremor-content-DEFAULT
Shadow
boxShadowtremor-dropdown
Roundness
borderRadiustremor-default
Font size number and text
fontSizetremor-default

API Reference: DonutChart

client component

data
Description
The source data, in which each entry is a dictionary.
Type
any[]
Default
Values
categoryoptional
Description
Sets the name of the key containing the quantitative chart values.
Type
string
Default
value
Values
index
Description
Sets the key to map the data to the axis.
Type
string
Default
Values
colorsoptional
Description
Change the default colors. When using Typescript, import the Color type provided by Tremor.
Type
Color[]
Default
Values
E.g. ['blue', 'indigo'].
variant
Description
Controls the type of the chart.
Type
string
Default
donut
Values
donut, pie
labeloptional
Description
Places a text element in the center of the donut chart. Only available when variant property is set to 'donut'.
Type
string
Default
Values
showLabeloptional
Description
Controls the visibility of the label displayed in the center. Only available when variant property is set to 'donut'.
Type
boolean
Default
false
Values
true, false
valueFormatteroptional
Description
Controls the formatting for the label. When using Typescript, import the ValueFormatter type provided by Tremor. Only available when variant property is set to 'donut'.
Type
ValueFormatter
Default
Values
showAnimationoptional
Description
Sets an animation to the chart when it is loaded.
Type
boolean
Default
false
Values
true, false
animationDurationoptional
Description
The animation duration in ms.
Type
number
Default
900
Values
showTooltipoptional
Description
Controls the visibility of the tooltip.
Type
boolean
Default
true
Values
true, false
noDataTextoptional
Description
The displayed text when the data is empty.
Type
string
Default
No Data
Values
onValueChangeoptional
Description
Callback function for when the value of the component changes.
Type
(value: T) => void
Default
Values

Need help? You can also ask the community on GitHub Discussions or Slack.