Donut Chart

Native SVG donut chart with interactive legend — ideal for portfolio breakdown, categories, and percentage composition.

Default

Portfolio by type

Portfólio por Tipo

Distribuição de imóveis gerenciados

Residencial40.8%6,7 mil
Comercial25.0%4,1 mil
Industrial17.0%2,8 mil
Misto11.8%2 mil
Rural5.5%900

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

<DonutChart />

// Customizado:
<DonutChart
  title="Receita por Segmento"
  segments={[
    { name: "Residencial", value: 6730, color: "var(--chart-1)" },
    { name: "Comercial",   value: 4120, color: "var(--chart-2)" },
    { name: "Industrial",  value: 2800, color: "var(--chart-3)" },
    { name: "Misto",       value: 1950, color: "var(--chart-4)" },
    { name: "Rural",       value:  900, color: "var(--chart-5)" },
  ]}
  valueFormatter={(n) =>
    Intl.NumberFormat("pt-BR", { notation: "compact" }).format(n)
  }
/>

With description

With subtitle

Despesas por Categoria

Ano fiscal 2024

Manutenção40.9%3,8 mil
Administrativo26.9%2,5 mil
Marketing20.4%1,9 mil
Jurídico11.8%1,1 mil

<DonutChart
  title="Despesas por Categoria"
  description="Ano fiscal 2024"
  segments={[
    { name: "Manutenção",     value: 3800, color: "var(--chart-1)" },
    { name: "Administrativo", value: 2500, color: "var(--chart-2)" },
    { name: "Marketing",      value: 1900, color: "var(--chart-3)" },
    { name: "Jurídico",       value: 1100, color: "var(--chart-4)" },
  ]}
/>