Donut Chart

Bar ChartLine Chart

Part-to-whole at a glance, with a live center readout.

Traffic sources
Sessions this month
38,070Sessions
SegmentValueShare
Organic search18,42048.4%
Direct9,31024.5%
Referral5,12013.4%
Social3,2808.6%
Email1,9405.1%

Installation

pnpm add krz-ui

Usage

import { DonutChart } from "krz-ui";
<DonutChart
  centerLabel="Sessions"
  data={[
    { label: "Search", value: 18420 },
    { label: "Direct", value: 9310 },
  ]}
/>

API Reference

PropTypeDescription
data{ label, value, color? }[]Segments, in the order they should appear.
size / thicknessnumberDiameter and ring width in px. Default 200 and 14% of size.
centerValue / centerLabelReactNodeCenter text. Defaults to the total and “Total”.
maxSegmentsnumberSmaller segments beyond this are grouped into “Other”. Default 6.
valueFormatter(value: number) => stringFormats values in the legend, center and table.
title / description / tableToggle—Same as the other charts.
className / style / ref—All go to the outer <figure>. See Customization.
classNames{ header?, title?, description?, legend?, legendItem?, tableToggle?, table?, figure?, segment?, center?, centerValue?, centerLabel? }Extra classes for inner parts.