Visualizations
Donut Chart
A donut chart displays quantitative information through a circular visualization.
donut variant 1
pie variant
import { DonutChart } from '@tremor/react';
const datahero = [ { name: 'Noche Holding AG', value: 9800, }, { name: 'Rain Drop AG', value: 4567, }, { name: 'Push Rail AG', value: 3908, }, { name: 'Flow Steal AG', value: 2400, }, { name: 'Tiny Loop Inc.', value: 2174, }, { name: 'Anton Resorts Holding', value: 1398, },];
const dataFormatter = (number: number) => `$ ${Intl.NumberFormat('us').format(number).toString()}`;
export const DonutChartHero = () => ( <> <div className="mx-auto space-y-12"> <div className="space-y-3"> <span className="text-center block font-mono text-tremor-default text-tremor-content dark:text-dark-tremor-content"> donut variant 1 </span> <div className="flex justify-center"> <DonutChart data={datahero} variant="donut" valueFormatter={dataFormatter} onValueChange={(v) => console.log(v)} /> </div> </div> <div className="space-y-3"> <span className="text-center block font-mono text-tremor-default text-tremor-content dark:text-dark-tremor-content"> pie variant </span> <div className="flex justify-center"> <DonutChart data={datahero} variant="pie" valueFormatter={dataFormatter} onValueChange={(v) => console.log(v)} /> </div> </div> </div> </>);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.
New York
London
Hong Kong
San Francisco
Singapore
import { DonutChart, Legend } from '@tremor/react';
const sales = [ { name: 'New York', sales: 980, }, { name: 'London', sales: 456, }, { name: 'Hong Kong', sales: 390, }, { name: 'San Francisco', sales: 240, }, { name: 'Singapore', sales: 190, },];
const valueFormatter = (number: number) => `$ ${Intl.NumberFormat('us').format(number).toString()}`;
export function DonutChartUsageExample() { return ( <> <div className="flex items-center justify-center space-x-6"> <DonutChart data={sales} category="sales" index="name" valueFormatter={valueFormatter} colors={['blue', 'cyan', 'indigo', 'violet', 'fuchsia']} className="w-40" /> <Legend categories={['New York', 'London', 'Hong Kong', 'San Francisco', 'Singapore']} colors={['blue', 'cyan', 'indigo', 'violet', 'fuchsia']} className="max-w-xs" /> </div> </> );}Usage example with on click event
The example below shows an interacive chart using the onValueChange prop.
nullimport { CodeBlock } from '@/app/ui/codeblock';import { Card, DonutChart, EventProps, Title } from '@tremor/react';import React from 'react';
const sales = [ { name: 'New York', sales: 980, }, { name: 'London', sales: 456, }, { name: 'Hong Kong', sales: 390, }, { name: 'San Francisco', sales: 240, }, { name: 'Singapore', sales: 190, },];
const valueFormatter = (number: number) => `$ ${Intl.NumberFormat('us').format(number).toString()}`;
export function DonutChartUsageExampleWithClickEvent() { const [value, setValue] = React.useState<EventProps>(null); return ( <> <DonutChart data={sales} category="sales" index="name" valueFormatter={valueFormatter} colors={['blue', 'cyan', 'indigo', 'violet', 'fuchsia']} onValueChange={(v) => setValue(v)} /> <CodeBlock source={JSON.stringify(value, null, 2)} variant="empty" className="mt-8" /> </> );}Usage example with custom tooltip
The example below shows a custom tooltip using customTooltip prop.
import { Card, DonutChart } from '@tremor/react';
const sales = [ { name: 'New York', sales: 980, }, { name: 'London', sales: 456, }, { name: 'Hong Kong', sales: 390, }, { name: 'San Francisco', sales: 240, }, { name: 'Singapore', sales: 190, }, { name: 'Zurich', sales: 139, },];
const valueFormatter = (number: number) => `$ ${Intl.NumberFormat('us').format(number).toString()}`;
export function DonutChartUsageExampleWithCustomTooltip() { type CustomTooltipTypeDonut = { payload: any; active: boolean | undefined; label: any; };
const customTooltip = (props: CustomTooltipTypeDonut) => { const { payload, active } = props; if (!active || !payload) return null; const categoryPayload = payload?.[0]; if (!categoryPayload) return null; return ( <div className="w-56 rounded-tremor-default border border-tremor-border bg-tremor-background p-2 text-tremor-default shadow-tremor-dropdown"> <div className="flex flex-1 space-x-2.5"> <div className={`flex w-1.5 flex-col bg-${categoryPayload?.color}-500 rounded`} /> <div className="w-full"> <div className="flex items-center justify-between space-x-8"> <p className="whitespace-nowrap text-right text-tremor-content"> {categoryPayload.name} </p> <p className="whitespace-nowrap text-right font-medium text-tremor-content-emphasis"> {categoryPayload.value} </p> </div> </div> </div> </div> ); }; return ( <DonutChart data={sales} category="sales" index="name" valueFormatter={valueFormatter} customTooltip={customTooltip} /> );}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.
import { Card, DonutChart, Title } from '@tremor/react';
const sales = [ { name: 'New York', sales: 980, }, { name: 'London', sales: 456, }, { name: 'Hong Kong', sales: 390, }, { name: 'San Francisco', sales: 240, }, { name: 'Singapore', sales: 190, }, { name: 'Zurich', sales: 139, },];
export function DonutChartUsageExampleWithCustomColors() { return ( <DonutChart data={sales} category="sales" index="name" colors={[ 'blue-900', 'blue-800', 'blue-700', 'blue-600', 'blue-500', 'blue-400', ]} /> );}API Reference: DonutChart
client component- data
- The source data, in which each entry is a dictionary.
Required
any[]
- category
- Sets the name of the key containing the quantitative chart values.
string
Default: value
- index
- Sets the key to map the data to the axis.
Required
string
- colors
- Change the default colors. When using Typescript, import the Color type provided by Tremor.
(Color | string)[]
- variant
- Controls the type of the chart.
Required
string
Default: donut
- label
- Places a text element in the center of the donut chart. Only available when variant property is set to 'donut'.
string
- showLabel
- Controls the visibility of the label displayed in the center. Only available when variant property is set to 'donut'.
boolean
Default: false
- 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'.
ValueFormatter
- showAnimation
- Sets an animation to the chart when it is loaded.
boolean
Default: false
- animationDuration
- The animation duration in ms.
number
Default: 900
- showTooltip
- Controls the visibility of the tooltip.
boolean
Default: true
- customTooltip
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"
React.ComponentType
- noDataText
- The displayed text when the data is empty.
string
Default: No Data
- onValueChange
- Callback function for when the value of the component changes.
(value: EventProps) => void
Theming
Donut Chart
| Element | Theme Token |
|---|---|
| Label in center (donut only) colorstremor-content-emphasis | colorstremor-content-emphasis |
Chart Tooltip
| Element | Theme Token |
|---|---|
| Border color colorstremor-border-DEFAULT | colorstremor-border-DEFAULT |
| Text color numbers colorstremor-content-emphasis | colorstremor-content-emphasis |
| Color ring around bulletpoint colorstremor-background-DEFAULT | colorstremor-background-DEFAULT |
| Background color colorstremor-background-default | colorstremor-background-default |
| Text color label colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
| Shadow boxShadowtremor-dropdown | boxShadowtremor-dropdown |
| Roundness borderRadiustremor-default | borderRadiustremor-default |
| Font size number and text fontSizetremor-default | fontSizetremor-default |