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.

null

import { 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" />    </>  );}

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.

category: Sets the name of the key containing the quantitative chart values.

index: Sets the key to map the data to the axis.

colors: Change the default colors. When using Typescript, import the Color type provided by Tremor.

variant: Controls the type of the chart.

label: Places a text element in the center of the donut chart. Only available when variant property is set to 'donut'.

showLabel: Controls the visibility of the label displayed in the center. Only available when variant property is set to 'donut'.

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: Sets an animation to the chart when it is loaded.

animationDuration: The animation duration in ms.

showTooltip: Controls the visibility of the tooltip.

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"

noDataText: The displayed text when the data is empty.

onValueChange: Callback function for when the value of the component changes.

Theming

Donut Chart

Element	Theme Token
Label in center (donut only) colorstremor-content-emphasis	colorstremor-content-emphasis

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

Donut Chart

Import DonutChart

Usage example

Usage example with on click event

Usage example with custom tooltip

Usage example with a custom colors

API Reference: DonutChart

Theming

Donut Chart

Chart Tooltip