Components

Donut Chart

A donut chart displays quantitative information through a circle-like visualization.

   

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.

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