# Target Rings

> bklit's ring chart tracking quarterly revenue targets: one ring per goal, a centre that switches to the ring you hover, and a legend that lights up its ring in return.

- Page: https://devl.dev/components/bklit-ring-chart
- Kind: component · Charts
- Install: `npx shadcn@latest add https://ui.bklit.com/r/ring-chart.json`
- By bklit (MIT): https://ui.bklit.com

## Usage

```tsx
import { type QuarterTarget, QuarterTargetsRingCard } from "@/components/bklit-ring-chart";

const targets: QuarterTarget[] = [
  { label: "New business", value: 642000, target: 900000, color: "var(--color-indigo-500)", swatch: "bg-indigo-500" },
  { label: "Expansion", value: 214000, target: 250000, color: "var(--color-sky-400)", swatch: "bg-sky-400" },
  { label: "Renewals", value: 1310000, target: 1500000, color: "var(--color-teal-400)", swatch: "bg-teal-400" },
];

export default function BklitRingChartDemo() {
  return <QuarterTargetsRingCard daysLeft={67} targets={targets} />;
}
```