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
Element | Theme Token |
---|---|
Label in center (donut only) colorstremor-content-emphasis |
Chart Tooltip
Element | Theme Token |
---|---|
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.