DoughnutChart
DoughnutChart – Presentational Chart.js doughnut chart with custom HTML legend matching the MDK design.
DoughnutChart – Presentational Chart.js doughnut chart with custom HTML legend matching the MDK design.
import { DoughnutChart } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
data | Required | DoughnutChartDataset[] | — | Array of labelled slices |
unit | Optional | string | undefined | — | Unit suffix shown in tooltips |
options | Optional | _DeepPartialObject<CoreChartOptions<"doughnut"> & ElementChartOptions<"doughnut"> & PluginChartOptions<"doughnut"> & DatasetChartOptions<"doughnut"> & ScaleChartOptions<"doughnut"> & DoughnutControllerChartOptions> | undefined | — | Chart.js options – merged with defaults |
cutout | Optional | string | undefined | — | Doughnut cutout percentage (default: '75%') |
borderWidth | Optional | number | undefined | — | Border width between segments (default: 4) |
height | Optional | number | undefined | — | Chart height in pixels |
legendPosition | Optional | Position | undefined | — | Where to place the legend relative to the chart (default: 'top') |
tooltip | Optional | ChartTooltipConfig | undefined | — | Custom HTML tooltip configuration. When provided, replaces the default doughnut tooltip (which shows label, value with unit, and percentage). Use `valueFormatter` to replicate the percentage display if needed. |
formatValue | Optional | ((value: number) => string) | undefined | — | Formats slice values in the built-in legend and default tooltip (default: raw number). |
className | Optional | string | undefined | — | — |
Usage
A Chart.js doughnut chart with a custom HTML legend, slice toggle, and percentage display.
Notes
- Clicking a legend item toggles the corresponding slice on the chart and dims the legend button.
- When the
datareference changes (labels change), all hidden states reset automatically.
Example
/** * Runnable example for DoughnutChart. */import { DoughnutChart } from '@tetherto/mdk-react-devkit'const deviceStatusData = [ { label: 'Online', value: 142, color: '#34C759' }, { label: 'Offline', value: 23, color: '#FF3B30' }, { label: 'Maintenance', value: 8, color: '#FF9500' },]const hashDistributionData = [ { label: 'Foundry EU', value: 450 }, { label: 'AntPool', value: 320 }, { label: 'F2Pool', value: 180 }, { label: 'Other', value: 50 },]export const DoughnutChartExample = () => ( <div className="mdk-example-row"> <DoughnutChart data={deviceStatusData} unit="devices" legendPosition="right" /> <DoughnutChart data={hashDistributionData} unit="TH/s" height={200} legendPosition="bottom" /> </div>)