Pie chart

ChartPie draws parts of a whole as slices and always labels them. Prefer a donut when a total belongs in the middle.

Preview Code

Connecting to the DMS preview…

static chartPie = ChartPie({
  title: "Traffic sources",
  height: "260px",
  legendPosition: "bottom",
  staticDataset: [
    { label: "Organic", value: 52 },
    { label: "Paid", value: 26 },
    { label: "Referral", value: 14 },
    { label: "Direct", value: 8 },
  ],
  type: "pie",
});

Usage

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

static sources = ChartPie({
  title: "$marketing.traffic.sources",
  fetchUrl: "/api/marketing/traffic/sources",
});

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

Keep slices few

Group the long tail into "Other" on the server: past six slices a pie stops reading.

Next steps