{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"grafico-de-area","type":"registry:component","title":"Gráfico de área","description":"Receita × meta com recharts e tooltip do shadcn.","author":"UI Catalog <https://ui.codehall.io>","dependencies":["recharts"],"registryDependencies":["card","chart"],"files":[{"path":"components/grafico-de-area.tsx","type":"registry:component","content":"'use client'\n\nimport { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/ui/chart'\n\nconst DATA = [\n  { mes: 'Jan', receita: 32, meta: 30 },\n  { mes: 'Fev', receita: 38, meta: 32 },\n  { mes: 'Mar', receita: 35, meta: 34 },\n  { mes: 'Abr', receita: 44, meta: 36 },\n  { mes: 'Mai', receita: 49, meta: 38 },\n  { mes: 'Jun', receita: 54, meta: 40 },\n]\n\nconst CONFIG = {\n  receita: { label: 'Receita', color: 'var(--chart-1)' },\n  meta: { label: 'Meta', color: 'var(--chart-3)' },\n} satisfies ChartConfig\n\nexport default function GraficoArea() {\n  return (\n    <Card className=\"w-full max-w-xl\">\n      <CardHeader>\n        <CardTitle>Receita × meta</CardTitle>\n        <CardDescription>Últimos 6 meses, em R$ mil</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={CONFIG} className=\"h-[220px] w-full\">\n          <AreaChart data={DATA} margin={{ left: 8, right: 8 }}>\n            <CartesianGrid vertical={false} />\n            <XAxis dataKey=\"mes\" tickLine={false} axisLine={false} tickMargin={8} />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent indicator=\"line\" />} />\n            <Area dataKey=\"meta\" type=\"natural\" fill=\"var(--color-meta)\" fillOpacity={0.15} stroke=\"var(--color-meta)\" strokeDasharray=\"4 4\" />\n            <Area dataKey=\"receita\" type=\"natural\" fill=\"var(--color-receita)\" fillOpacity={0.3} stroke=\"var(--color-receita)\" />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n"}]}