Visualizations

Donut Chart

A donut chart displays quantitative information through a circular visualization.

donut variant 1
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 DonutChart and Legend component.

  1. New York

  2. London

  3. Hong Kong

  4. San Francisco

  5. Singapore

Usage example with on click event

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

null

Usage example with custom tooltip

The example below shows a custom tooltip using customTooltip prop.

Usage example with a custom colors

The example below shows a chart with custom colors. Note, that for the custom HEX color to work, the tailwind.config.js has to be adjusted. Learn more about custom colors in your theming section.

API Reference: DonutChart

client component
data
Required
any[]
The source data, in which each entry is a dictionary.
category
string

Default: value

Sets the name of the key containing the quantitative chart values.
index
Required
string
Sets the key to map the data to the axis.
colors
(Color | string)[]
Change the default colors. When using Typescript, import the Color type provided by Tremor.
variant
Required
string

Default: donut

Controls the type of the chart.
label
string
Places a text element in the center of the donut chart. Only available when variant property is set to 'donut'.
showLabel
boolean

Default: false

Controls the visibility of the label displayed in the center. Only available when variant property is set to 'donut'.
valueFormatter
ValueFormatter
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'.
showAnimation
boolean

Default: false

Sets an animation to the chart when it is loaded.
animationDuration
number

Default: 900

The animation duration in ms.
showTooltip
boolean

Default: true

Controls the visibility of the tooltip.
customTooltip
React.ComponentType

Override the default tooltip by applying custom styling and data logic. Refer to the examples of custom tooltips above for more info. Within this prop, you have access to:

  • active: Indicates whether a tooltip should be displayed for a corresponding data point
  • payload: E.g., use payload[0].value for the value, such as "$ 450". Both payload[0].dataKey and payload[0].name for category values, such as "Sales"
  • label: For x-axis values, such as "Jan 21"
noDataText
string

Default: No Data

The displayed text when the data is empty.
onValueChange
(value: EventProps) => void
Callback function for when the value of the component changes.

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