Donut Sweep

Revenue by planThis quarter

$0total

  • Enterprise49%
  • Pro31%
  • Starter14%
  • Add-ons7%
About this piece

Donut Sweep

The total counts up while the donut draws one slice after another, each legend row sliding in as its arc lands.

Usage

The import and the props worth knowing about, in one place.

import { Dashboard34 } from "@/components/beste/piece/dashboard34";

<Dashboard34
  title="Revenue by plan"
  range="This quarter"
  totalLabel="total"
  prefix="$"
  slices={[
    {
      "label": "Enterprise",
      "value": 61200,
      "tone": "primary"
    },
    {
      "label": "Pro",
      "value": 38400,
      "tone": "sky"
    },
    {
      "label": "Starter",
      "value": 17900,
      "tone": "violet"
    },
    {
      "label": "Add-ons",
      "value": 8300,
      "tone": "emerald"
    }
  ]}
/>

More Dashboard pieces

View all Dashboard
Revenue$48.2K
  • Subscriptions
    52%
  • One-time
    28%
  • Add-ons
    14%
  • Refunds
    6%

Donut Breakdown

Revenue split card with an SVG donut on the left showing weighted slices and a percentage legend on the right.

Visit
12,400
Sign-up
3,42072%
Active
1,98042%
Paid
62069%

Funnel

Conversion funnel stages where each row's bar narrows against the top stage and a rose drop-off percentage marks churn.

Top performers
Ada L.12,840
Marcus R.10,320
Priya S.8,960

Leaderboard

Top-three ranking card with gold, silver, and bronze medal circles next to names and monospaced scores.

Traffic by device9,420 sessions
  • Mobile58%
  • Desktop32%
  • Tablet8%
  • Other2%

Stacked Bar

Horizontal 100 percent stacked bar splitting a total into colored segments with a wrapping legend of labels and percentages.

68%
Storage used34 GB of 50 GB

Progress Circle

Radial progress gauge with a tone-colored arc, the percentage centered, and a caption line beside it.

Top sources
1Direct
4,820
2Google
3,610
3Twitter
1,890
4Referral
980

Top List

Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.