Donut Breakdown

A ring of slices separated by surface gaps with a headline figure in the centre and a legend that carries every value.

TypeScript Source with Startup & Business plans Light & dark

Generation by source

4.39K GWh

Total generation

Solar1.24K GWh
Wind980 GWh
Hydro610 GWh
Nuclear455 GWh
Other1.11K GWh

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Leaf } from 'lucide-react';
2import { DonutBreakdownChart } from '@/components/component-kit/items/chart-donut-breakdown';
3
4export function Example() {
5  return (
6    <DonutBreakdownChart
7      icon={Leaf}
8      title="Generation by source"
9      centerLabel="Total generation"
10      format={(v) => `${v.toLocaleString()} GWh`}
11      slices={[
12        { id: 'solar', label: 'Solar', value: 1240 },
13        { id: 'wind', label: 'Wind', value: 980 },
14        { id: 'hydro', label: 'Hydro', value: 610 },
15      ]}
16    />
17  );
18}

Props

Donut Breakdown properties
Prop	Type	Default	Description
`slices`	`DonutSlice[]`	`—`	Slices with id, label, value and optional light/dark color.
`centerLabel`	`ReactNode`	`Total`	Label under the centre figure.
`thickness`	`number`	`0.36`	Ring thickness as a fraction of the radius.
`action`	`ReactNode`	`—`	Header slot for a menu button.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Leaf } from 'lucide-react';
2import { DonutBreakdownChart } from '@/components/component-kit/items/chart-donut-breakdown';
3
4export function Example() {
5  return (
6    <DonutBreakdownChart
7      icon={Leaf}
8      title="Generation by source"
9      centerLabel="Total generation"
10      format={(v) => `${v.toLocaleString()} GWh`}
11      slices={[
12        { id: 'solar', label: 'Solar', value: 1240 },
13        { id: 'wind', label: 'Wind', value: 980 },
14        { id: 'hydro', label: 'Hydro', value: 610 },
15      ]}
16    />
17  );
18}

Prop

Type

Default

Description

slices

DonutSlice[]

—

Slices with id, label, value and optional light/dark color.

centerLabel

ReactNode

Total

Label under the centre figure.

thickness

number

0.36

Ring thickness as a fraction of the radius.

action

ReactNode

—

Header slot for a menu button.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Leaf } from 'lucide-react';
2import { DonutBreakdownChart } from '@/components/component-kit/items/chart-donut-breakdown';
3
4export function Example() {
5  return (
6    <DonutBreakdownChart
7      icon={Leaf}
8      title="Generation by source"
9      centerLabel="Total generation"
10      format={(v) => `${v.toLocaleString()} GWh`}
11      slices={[
12        { id: 'solar', label: 'Solar', value: 1240 },
13        { id: 'wind', label: 'Wind', value: 980 },
14        { id: 'hydro', label: 'Hydro', value: 610 },
15      ]}
16    />
17  );
18}

Prop

Type

Default

Description

slices

DonutSlice[]

—

Slices with id, label, value and optional light/dark color.

centerLabel

ReactNode

Total

Label under the centre figure.

thickness

number

0.36

Ring thickness as a fraction of the radius.

action

ReactNode

—

Header slot for a menu button.

Donut Breakdown

A ring of slices separated by surface gaps with a headline figure in the centre and a legend that carries every value.

TypeScript Source with Startup & Business plans Light & dark

Generation by source

4.39K GWh

Total generation

Solar1.24K GWh
Wind980 GWh
Hydro610 GWh
Nuclear455 GWh
Other1.11K GWh

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Leaf } from 'lucide-react';
2import { DonutBreakdownChart } from '@/components/component-kit/items/chart-donut-breakdown';
3
4export function Example() {
5  return (
6    <DonutBreakdownChart
7      icon={Leaf}
8      title="Generation by source"
9      centerLabel="Total generation"
10      format={(v) => `${v.toLocaleString()} GWh`}
11      slices={[
12        { id: 'solar', label: 'Solar', value: 1240 },
13        { id: 'wind', label: 'Wind', value: 980 },
14        { id: 'hydro', label: 'Hydro', value: 610 },
15      ]}
16    />
17  );
18}

Props

Donut Breakdown properties
Prop	Type	Default	Description
`slices`	`DonutSlice[]`	`—`	Slices with id, label, value and optional light/dark color.
`centerLabel`	`ReactNode`	`Total`	Label under the centre figure.
`thickness`	`number`	`0.36`	Ring thickness as a fraction of the radius.
`action`	`ReactNode`	`—`	Header slot for a menu button.