Radial bar chart

ChartRadialBar draws each record as a ring filled to its value, in percent. Use it for the progress of a few measures towards a goal — onboarding steps, quotas — with showTotal to label the middle with the chart's title and total.

Preview Code

Connecting to the DMS preview…

static chartRadialBar = ChartRadialBar({
  title: "Onboarding completion",
  height: "280px",
  hollowSize: "45%",
  showTotal: true,
  staticDataset: [
    { label: "Profile", value: 92 },
    { label: "Team invited", value: 64 },
    { label: "First import", value: 38 },
  ],
  type: "radialBar",
});

Usage

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

static onboarding = ChartRadialBar({
  title: "$app.onboarding.completion",
  fetchUrl: "/api/onboarding/completion",
  showTotal: true,
});

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

One measure

A single record makes a gauge: one ring and its value in the middle.

Next steps