---
title: Radial Blocks
description: Ready-made radial chart blocks, powered by Apache ECharts
image: /og/og-image.png
---

## Monthly Budget

### Monthly Budget

```tsx
"use client";

import { EChartsRadialChart, type ChartConfig } from "@/components/evilcharts/charts/echarts-radial-chart";
import { cn } from "@/lib/utils";

const chartData = [
  {
    name: "payroll",
    label: "Payroll",
    value: 46,
    amount: 920000,
    swatch: "bg-[#d97706] dark:bg-[#fbbf24]",
  },
  {
    name: "infrastructure",
    label: "Infrastructure",
    value: 21,
    amount: 420000,
    swatch: "bg-[#2563eb] dark:bg-[#60a5fa]",
  },
  {
    name: "marketing",
    label: "Marketing",
    value: 14,
    amount: 280000,
    swatch: "bg-[#e11d48] dark:bg-[#fb7185]",
  },
  {
    name: "tooling",
    label: "Tooling",
    value: 10,
    amount: 200000,
    swatch: "bg-[#475569] dark:bg-[#94a3b8]",
  },
  {
    name: "support",
    label: "Support",
    value: 9,
    amount: 180000,
    swatch: "bg-[#0d9488] dark:bg-[#2dd4bf]",
  },
];

const chartConfig = {
  payroll: { label: "Payroll", colors: { light: ["#d97706"], dark: ["#fbbf24"] } },
  infrastructure: { label: "Infrastructure", colors: { light: ["#2563eb"], dark: ["#60a5fa"] } },
  marketing: { label: "Marketing", colors: { light: ["#e11d48"], dark: ["#fb7185"] } },
  tooling: { label: "Tooling", colors: { light: ["#475569"], dark: ["#94a3b8"] } },
  support: { label: "Support", colors: { light: ["#0d9488"], dark: ["#2dd4bf"] } },
} satisfies ChartConfig;

const TOTAL = chartData.reduce((sum, { amount }) => sum + amount, 0);

const money = (value: number) => value.toLocaleString("en-US");

export function EChartsBudgetRadialChart() {
  return (
    <div className="flex h-full w-full flex-col gap-6 p-4">
      <div className="flex items-baseline justify-between gap-4">
        <span className="text-primary text-base font-medium tracking-tight sm:text-lg">
          Quarterly Spend
        </span>
        <span className="text-muted-foreground text-xs">${money(TOTAL)}</span>
      </div>

      <div className="grid shrink-0 grid-cols-5 gap-2">
        {chartData.map((row) => (
          <div key={row.name} className="flex flex-col items-center gap-1">
            <div className="aspect-square w-full max-w-14">
              <EChartsRadialChart
                data={[row]}
                config={chartConfig}
                nameKey="name"
                max={100}
                innerRadius="66%"
                outerRadius="100%"
                className="h-full w-full"
              >
                <EChartsRadialChart.RadialBar dataKey="value" barSize={8} cornerRadius={6} />
              </EChartsRadialChart>
            </div>
            <span className="text-muted-foreground w-full truncate text-center text-[10px] sm:text-[11px]">
              {row.label}
            </span>
          </div>
        ))}
      </div>

      <div className="flex min-h-0 flex-1 flex-col">
        {chartData.map(({ name, label, value, amount, swatch }) => (
          <div
            key={name}
            className="odd:bg-muted/30 flex flex-1 items-center gap-2 rounded-md px-3"
          >
            <span className={cn("size-2.5 shrink-0 rounded-[3px]", swatch)} />
            <span className="text-primary text-xs font-medium tabular-nums">{value}%</span>
            <span className="text-muted-foreground truncate text-xs">{label}</span>
            <span className="text-primary ml-auto text-xs font-medium">${money(amount)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

```
### npm

```bash
npx shadcn@latest add @evilcharts/budget-echarts-radial-chart
```

### yarn

```bash
yarn shadcn@latest add @evilcharts/budget-echarts-radial-chart
```

### bun

```bash
bunx --bun shadcn@latest add @evilcharts/budget-echarts-radial-chart
```

### pnpm

```bash
pnpm dlx shadcn@latest add @evilcharts/budget-echarts-radial-chart
```

## Ride Summary

### Ride Summary

```tsx
"use client";

import { EChartsRadialChart, type ChartConfig } from "@/components/evilcharts/charts/echarts-radial-chart";
import { cn } from "@/lib/utils";

function BikeIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.7"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <circle cx="5.5" cy="17.5" r="3.5" />
      <circle cx="18.5" cy="17.5" r="3.5" />
      <circle cx="15.5" cy="4.5" r="1" />
      <path d="M12 17.5V14L9 11l4-3 2 3h2.5" />
    </svg>
  );
}

function MountainIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M2.5 19h19L14 5.5l-3.5 6.5L8.5 9.5 2.5 19Z" />
    </svg>
  );
}

function BoltIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" className={className}>
      <path d="M13 2 5 13h6l-1 9 8-11h-6l1-9Z" />
    </svg>
  );
}

function GaugeIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M3.5 17.5a8.5 8.5 0 1 1 17 0" />
      <path d="M12 17.5 15.5 10.5" />
      <circle cx="12" cy="17.5" r="1.2" fill="currentColor" stroke="none" />
    </svg>
  );
}

function SprintIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.9"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M6 14.5 12 8.5l6 6" />
      <path d="M6 19.5 12 13.5l6 6" />
    </svg>
  );
}

function MoonIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.7"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M20 14.2A8.4 8.4 0 0 1 9.8 4a8.4 8.4 0 1 0 10.2 10.2Z" />
    </svg>
  );
}

const RIDE = { distance: 18.4, goal: 25, unit: "km" };

const METRICS = [
  {
    name: "elevation",
    value: 312,
    goal: 450,
    unit: "m",
    icon: MountainIcon,
    tint: "text-[#0284c7] dark:text-[#38bdf8]",
  },
  {
    name: "energy",
    value: 684,
    goal: 1200,
    unit: "kJ",
    icon: BoltIcon,
    tint: "text-[#d97706] dark:text-[#fbbf24]",
  },
  {
    name: "cadence",
    value: 82,
    goal: 95,
    unit: "rpm",
    icon: GaugeIcon,
    tint: "text-[#e11d48] dark:text-[#fb7185]",
  },
];

const SPLITS = [
  {
    name: "sprints",
    label: "Sprints",
    value: "7",
    unit: "efforts",
    icon: SprintIcon,
    tint: "text-[#7c3aed] dark:text-[#a78bfa]",
  },
  {
    name: "recovery",
    label: "Recovery",
    value: "46",
    unit: "min",
    icon: MoonIcon,
    tint: "text-[#0284c7] dark:text-[#38bdf8]",
  },
];

const chartConfig = {
  elevation: {
    label: "Elevation",
    colors: { light: ["#0ea5e9", "#0284c7"], dark: ["#38bdf8", "#0ea5e9"] },
  },
  energy: {
    label: "Energy",
    colors: { light: ["#f59e0b", "#d97706"], dark: ["#fbbf24", "#f59e0b"] },
  },
  cadence: {
    label: "Cadence",
    colors: { light: ["#f43f5e", "#e11d48"], dark: ["#fb7185", "#f43f5e"] },
  },
} satisfies ChartConfig;

const share = (value: number, goal: number) => Math.round((value / goal) * 100);

export function EChartsRideRadialChart() {
  return (
    <div className="flex h-full w-full flex-col gap-2 p-2 sm:flex-row sm:gap-5 sm:p-4">
      <div className="flex min-h-0 flex-1 flex-col gap-2 sm:gap-4">
        <div className="flex shrink-0 flex-col items-center gap-1 sm:gap-2">
          <BikeIcon className="size-4 text-[#7c3aed] sm:size-7 dark:text-[#a78bfa]" />

          <div className="flex items-baseline gap-1.5">
            <span className="text-primary text-2xl leading-none font-semibold tracking-tight tabular-nums sm:text-4xl">
              {RIDE.distance}
            </span>
            <span className="text-muted-foreground text-sm font-medium">{RIDE.unit} ridden</span>
          </div>

          <div className="bg-muted h-2 w-full overflow-hidden rounded-full sm:h-2.5">
            <div
              className="h-full rounded-full bg-[#7c3aed] dark:bg-[#a78bfa]"
              style={{ width: `${share(RIDE.distance, RIDE.goal)}%` }}
            />
          </div>
        </div>

        <div className="grid min-h-0 flex-1 grid-cols-3 gap-2 border-t pt-1.5 sm:pt-3">
          {METRICS.map(({ name, value, goal, unit, icon: Icon, tint }) => (
            <div
              key={name}
              className="flex min-h-0 flex-col items-center justify-center gap-1 sm:gap-2"
            >
              <div className="relative min-h-0 w-full max-w-[104px] flex-1 sm:aspect-square sm:min-h-auto sm:flex-initial">
                <EChartsRadialChart
                  data={[{ name, value: share(value, goal) }]}
                  config={chartConfig}
                  nameKey="name"
                  max={100}
                  innerRadius="70%"
                  outerRadius="100%"
                  className="h-full w-full"
                >
                  <EChartsRadialChart.RadialBar dataKey="value" barSize={9} cornerRadius={6} />
                </EChartsRadialChart>

                <span
                  className={cn(
                    "pointer-events-none absolute inset-0 flex items-center justify-center",
                    tint,
                  )}
                >
                  <Icon className="size-5 sm:size-6" />
                </span>
              </div>

              <div className="flex shrink-0 items-baseline gap-1">
                <span className="text-primary text-xs font-semibold tabular-nums sm:text-base">
                  {value}
                </span>
                <span className="text-muted-foreground text-[11px]">{unit}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="flex shrink-0 gap-3 border-t pt-2 sm:w-[34%] sm:max-w-60 sm:border-t-0 sm:border-l sm:pt-0 sm:pl-5">
        {SPLITS.map(({ name, label, value, unit, icon: Icon, tint }, index) => (
          <div
            key={name}
            className={cn(
              "flex flex-1 flex-col justify-between gap-1.5 sm:gap-3",
              index > 0 && "border-l pl-3",
            )}
          >
            <Icon className={cn("size-4 shrink-0 sm:size-6", tint)} />

            <div className="flex flex-col gap-0.5">
              <span className="text-muted-foreground text-[10px] tracking-wider uppercase">
                {label}
              </span>
              <div className="flex items-baseline gap-1">
                <span className="text-primary text-xl leading-none font-semibold tabular-nums sm:text-2xl">
                  {value}
                </span>
                <span className="text-muted-foreground text-[11px]">{unit}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

```
### npm

```bash
npx shadcn@latest add @evilcharts/ride-echarts-radial-chart
```

### yarn

```bash
yarn shadcn@latest add @evilcharts/ride-echarts-radial-chart
```

### bun

```bash
bunx --bun shadcn@latest add @evilcharts/ride-echarts-radial-chart
```

### pnpm

```bash
pnpm dlx shadcn@latest add @evilcharts/ride-echarts-radial-chart
```

## Cache Tiers

### Cache Tiers

```tsx
"use client";

import { EChartsRadialChart, type ChartConfig } from "@/components/evilcharts/charts/echarts-radial-chart";
import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";

const TOTAL = 1000;

const TIERS = [
  {
    name: "memory",
    label: "L1 Memory",
    count: 610,
    swatch: "bg-[#dc2626] dark:bg-[#ef4444]",
  },
  {
    name: "regional",
    label: "L2 Regional",
    count: 240,
    swatch: "bg-[#d97706] dark:bg-[#f59e0b]",
  },
  {
    name: "overflow",
    label: "Edge Overflow",
    count: 100,
    swatch: "bg-[#2563eb] dark:bg-[#3b82f6]",
  },
  {
    name: "origin",
    label: "Origin Fetch",
    count: 50,
    swatch: "bg-[#0f172a] dark:bg-white",
  },
];

const STATS = [
  { name: "warm", label: "Served Warm", value: 9150 },
  { name: "revalidated", label: "Revalidated", value: 1280 },
  { name: "evictions", label: "Evictions", value: 412 },
  { name: "purges", label: "Purges", value: 96 },
];

const chartConfig = {
  memory: { label: "L1 Memory", colors: { light: ["#dc2626"], dark: ["#ef4444"] } },
  regional: { label: "L2 Regional", colors: { light: ["#d97706"], dark: ["#f59e0b"] } },
  overflow: { label: "Edge Overflow", colors: { light: ["#2563eb"], dark: ["#3b82f6"] } },
  origin: { label: "Origin Fetch", colors: { light: ["#0f172a"], dark: ["#ffffff"] } },
} satisfies ChartConfig;

const chartData = [...TIERS]
  .reverse()
  .map(({ name, count }) => ({ name, share: (count / TOTAL) * 100 }));

const count = (value: number) => value.toLocaleString("en-US");

function useCompactRings() {
  const [compact, setCompact] = useState(false);

  useEffect(() => {
    const query = window.matchMedia("(max-width: 639px)");
    const sync = () => setCompact(query.matches);
    sync();
    query.addEventListener("change", sync);
    return () => query.removeEventListener("change", sync);
  }, []);

  return compact;
}

export function EChartsCacheTiersRadialChart() {
  const compact = useCompactRings();

  return (
    <div className="flex h-full w-full flex-col gap-2 p-3 sm:gap-3 sm:p-4">
      <div className="flex min-h-0 flex-1 gap-3 sm:gap-4">
        <div className="relative min-h-0 flex-1 sm:-mb-10">
          <EChartsRadialChart
            data={chartData}
            config={chartConfig}
            nameKey="name"
            variant="semi"
            max={100}
            innerRadius="38%"
            outerRadius="96%"
            className="h-full w-full"
          >
            <EChartsRadialChart.RadialBar
              dataKey="share"
              barSize={compact ? 7 : 13}
              cornerRadius={compact ? 4 : 7}
            />
          </EChartsRadialChart>
        </div>

        <div className="grid shrink-0 grid-cols-2 content-center gap-x-4 gap-y-5 sm:w-[40%] sm:max-w-64">
          {STATS.map(({ name, label, value }) => (
            <div key={name} className="flex flex-col gap-1">
              <span className="text-muted-foreground truncate text-xs sm:text-sm">{label}</span>
              <span className="text-primary text-lg leading-none font-medium tabular-nums sm:text-xl">
                {count(value)}
              </span>
            </div>
          ))}
        </div>
      </div>

      <div className="grid shrink-0 grid-cols-2 gap-x-4 gap-y-2 border-t pt-2 sm:grid-cols-4 sm:gap-y-3 sm:pt-3">
        {TIERS.map(({ name, label, count: hits, swatch }) => (
          <div key={name} className="flex flex-col gap-1">
            <div className="flex items-center gap-1.5">
              <span className={cn("size-2.5 shrink-0 rounded-[3px]", swatch)} />
              <span className="text-primary truncate text-xs">{label}</span>
            </div>
            <span className="text-muted-foreground text-xs tabular-nums">
              {count(hits)}/{count(TOTAL)} ({Math.round((hits / TOTAL) * 100)}%)
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

```
### npm

```bash
npx shadcn@latest add @evilcharts/cache-tiers-echarts-radial-chart
```

### yarn

```bash
yarn shadcn@latest add @evilcharts/cache-tiers-echarts-radial-chart
```

### bun

```bash
bunx --bun shadcn@latest add @evilcharts/cache-tiers-echarts-radial-chart
```

### pnpm

```bash
pnpm dlx shadcn@latest add @evilcharts/cache-tiers-echarts-radial-chart
```