2 variants

Donut Chart

Part to whole and ratio against a limit. A donut with the total in the middle, and a half ring gauge.

Donut

Up to five slices with rounded ends and an even gap, the total in the middle, and a legend carrying every value and share. Hover swaps the center.

Traffic by device

Desktop18,42056%
Mobile12,31037%
Tablet2,1407%

usage.tsx

import { DonutChart } from "@/components/registry/donut-chart";

export function Devices() {
  return (
    <DonutChart
      title="Traffic by device"
      slices={[
        { label: "Desktop", value: 18420 },
        { label: "Mobile", value: 12310 },
      ]}
    />
  );
}

"use client";

import { useReducedMotion } from "motion/react";
import { useEffect, useRef, useState } from "react";
import {
  ChartFrame,
  ChartTable,
  formatCompact,
  formatNumber,
  seriesColor,
  useSeen,
} from "@/components/registry/chart-core";

139 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/donut-chart

Gauge

A half ring for one value against its limit, with optional status bands that are written out, never carried by color alone.

Monthly API quota

742Kof 1M requests

Past 70% of quota

usage.tsx

import { GaugeChart } from "@/components/registry/gauge-chart";

export function Quota() {
  return <GaugeChart label="Requests" value={742000} max={1000000} />;
}

"use client";

import { useReducedMotion } from "motion/react";
import { useRef } from "react";
import { ChartFrame, formatNumber, useSeen } from "@/components/registry/chart-core";

export interface GaugeThreshold {
  /** The value from which this tone applies. */
  from: number;
  tone: "good" | "warning" | "critical";
  /** What the band means, written beside the gauge. Default "On track", "Getting close" or "Over the limit". */
  label?: string;

103 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/gauge-chart

Traffic by device
Slice	Value	Share
Desktop	18,420	56%
Mobile	12,310	37%
Tablet	2,140	7%