Area Chart

Native SVG area chart with multiple series, clickable legend, and summary metrics — time series for revenue, expenses, leads, and more.

Default

12-month financial performance

Desempenho Financeiro

JanFevMarAbrMaiJunJulAgoSetOutNovDez

Receita Total

R$ 14,98M

+12,4%

Despesas

R$ 7,90M

+6,1%

Lucro Líquido

R$ 7,08M

+19,2%

import { AreaChartCard } from "@/components/blocks/area-chart";

<AreaChartCard />

// Customizado:
<AreaChartCard
  title="Leads por Canal"
  data={[
    { mes: "Jan", organico: 320, pago: 120 },
    { mes: "Fev", organico: 410, pago: 180 },
    // ...
  ]}
  series={[
    { key: "organico", color: "var(--chart-1)" },
    { key: "pago",     color: "var(--chart-2)" },
  ]}
  xKey="mes"
  summaryItems={[
    { label: "Total Orgânico", value: "4.820",  change: "+18%", trend: "up" },
    { label: "Total Pago",     value: "1.960",  change: "+5%",  trend: "up" },
  ]}
/>

Single series

Monthly occupancy

Taxa de Ocupação

Evolução mensal em %

JanFevMarAbrMaiJunJulAgoSetOutNovDez

Média Anual

93,8%

+3,2%

Pico

98%

Dez

<AreaChartCard
  title="Taxa de Ocupação"
  description="Evolução mensal em %"
  data={[
    { mes: "Jan", ocupacao: 88 },
    // ...
  ]}
  series={[{ key: "ocupacao", color: "var(--chart-1)" }]}
  xKey="mes"
  summaryItems={[
    { label: "Média Anual", value: "93,8%", change: "+3,2%", trend: "up" },
    { label: "Pico",        value: "98%",   change: "Dez",   trend: "up" },
  ]}
/>