Doughnut Chart

Name: elia
Author: AILE.SH

A pie with the total in the hole — what makes up this one number.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { DoughnutChart } from "@aile.sh/elia";

const TRAFFIC = [
  { id: "api", label: "REST API", value: 48200 },
  { id: "sdk", label: "SDK", value: 31400 },
  { id: "playground", label: "Playground", value: 12800 },
  { id: "batch", label: "Batch jobs", value: 8600 },
  { id: "webhooks", label: "Webhooks", value: 3100 },
];

export function Example() {
  return (
    <DoughnutChart
      title="Requests by surface"
      caption="Last 30 days"
      data={TRAFFIC}
      size={220}
      showTable
      centerCaption="Requests"
    />
  );
}

— elia design system · MIT · charts · https://github.com/aile-sh/elia