Components
Donut Chart
A donut chart displays quantitative information through a circle-like visualization.
donut variant
pie variant
Import DonutChart
Tremor exports one component to create a donut chart.
import { DonutChart } from "@tremor/react";
Anatomy
How the basic component is pieced together displaying all properties with their default values.
import { DonutChart } from "@tremor/react"; export default () => ( <DonutChart data={[]} category="value" dataKey="name" colors={[ "blue", ... ]} variant="donut" valueFormatter={undefined} label={undefined} showLabel={true} showTooltip={true} showAnimation={true} height="h-44" marginTop="mt-0" /> );
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 () => ( <Card maxWidth="max-w-lg"> <Title>Sales by City</Title> <DonutChart data={ cities } category="sales" dataKey="name" valueFormatter={ valueFormatter } marginTop="mt-6" colors={["slate", "violet", "indigo", "rose", "cyan", "amber"]} /> </Card> );
API Reference: DonutChart
- data
- Description
- The source data, formatted as a JSON-array
- Type
- Object
- Default
- -
- Values
- variant
- Description
- Controls the type of the chart.
- Type
- string
- Default
- donut
- Values
- donut, pie
- categoryoptional
- Description
- Sets the name of the key containing the quantitative chart values.
- Type
- string
- Default
- value
- Values
- dataKeyoptional
- Description
- Sets the key to map the data to the chart.
- Type
- string
- Default
- name
- Values
- colorsoptional
- Description
- Change the default colors.
- Type
- array
- Default
- -
- Values
- E.g. ['blue', 'indigo']
- valueFormatteroptional
- Description
- Determines the formatting of the displayed values.
- Type
- function
- Default
- Values
- labeloptional
- Description
- Sets the text element which is displayed in the center of the donut chart. If fill is set to true, the label is not displayed.
- Type
- string
- Default
- Values
- showLabeloptional
- Description
- Controls the visibility of the text element displayed in the center of the donut chart.
- Type
- boolean
- Default
- false
- Values
- true, false
- showTooltipoptional
- Description
- Controls the visibility of the tooltip.
- Type
- boolean
- Default
- true
- Values
- true, false
- showAnimationoptional
- Description
- Sets an animation to the chart when it is loaded.
- Type
- boolean
- Default
- true
- Values
- true, false
- heightoptional
- marginTopoptional
Line ChartAccordion