Donut chart

ChartDonut draws parts of a whole on a ring, with an optional central label and sub-label. Its data is a list of { label, value } records.

Preview Code

Connecting to the DMS preview…

static chartDonut = ChartDonut({
  title: "Accounts by plan",
  height: "260px",
  centralLabel: "1,284",
  centralSubLabel: "accounts",
  legendPosition: "bottom",
  staticDataset: [
    { label: "Free", value: 712 },
    { label: "Starter", value: 341 },
    { label: "Business", value: 189 },
    { label: "Enterprise", value: 42 },
  ],
  type: "donut",
});

Usage

import { ChartDonut } from "@antelopejs/interface-dms/base/chart";

static plans = ChartDonut({
  title: "$saas.accounts.by_plan",
  fetchUrl: "/api/saas/accounts/by-plan",
  centralLabel: "$saas.accounts.total",
});

The route answers { series } in the shape listed under Data shapes. Wrap the chart in a ChartCard to add a headline value and a comparison.

Options

Recipes

Labels on the slices

A donut labels each slice only when the ring can hold the text: from arcWidth: 35 up. The default ring shows none; the legend and the tooltip carry the values.

Next steps