{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-area",
  "title": "Chart Area",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "An area chart with gradient, solid or no fill, stacked or expanded to 100%, four curves and reference lines, in a frame with a table view, a legend that toggles series, patterns for color blindness and loading, empty and error states.",
  "dependencies": [
    "recharts@^3"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/chart.json",
    "https://ui.ballmac.com/r/chart-frame.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/chart-area.tsx",
      "content": "// Ballmac UI: Chart Area. https://ui.ballmac.com/components/chart-area\n\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, ReferenceLine, XAxis, YAxis } from \"recharts\"\n\nimport { ChartTooltip, ChartTooltipContent } from \"@/components/ballmac/chart\"\nimport { ChartFrame, domainTicks, niceScale, type ChartFrameProps } from \"@/components/ballmac/chart-frame\"\nimport { cn } from \"@/lib/utils\"\n\ntype ChartAreaProps = Omit<ChartFrameProps, \"children\" | \"summaryMode\" | \"skeleton\" | \"table\"> & {\n  /** How the line moves between points. */\n  curve?: \"monotone\" | \"linear\" | \"step\" | \"natural\"\n  /** \"stacked\" adds the series up; \"expanded\" shows each one's share of the total, as a percentage. */\n  stack?: \"none\" | \"stacked\" | \"expanded\"\n  /** What fills under each line. */\n  fillMode?: \"gradient\" | \"solid\" | \"none\"\n  /** Draw a dot on every point. */\n  dots?: boolean\n  /** Which grid lines to draw. */\n  grid?: \"horizontal\" | \"both\" | \"none\"\n  /** Show the value axis. */\n  yAxis?: boolean\n  /** Writes a tick on the value axis. Defaults to a compact number (12K). */\n  yFormatter?: (value: number) => string\n  /** Fix the value axis, for example `[0, 100]`. */\n  yDomain?: [number | \"auto\", number | \"auto\"]\n  /** Horizontal lines at fixed values, such as a target or a limit. */\n  referenceLines?: { y: number; label: string }[]\n  /** The marker style in the tooltip, or \"none\" to hide the tooltip. */\n  tooltip?: \"line\" | \"dot\" | \"dashed\" | \"none\"\n}\n\n/**\n * An area chart in a ChartFrame: gradient, solid or no fill, stacked or expanded to 100%, four curves, reference lines, a legend that switches\n * series on and off, a Table view, patterns for color blindness, loading, empty and error states, and mirroring in right-to-left.\n */\nfunction ChartArea({\n  data,\n  xKey,\n  series,\n  curve = \"monotone\",\n  stack = \"none\",\n  fillMode = \"gradient\",\n  dots = false,\n  grid = \"horizontal\",\n  yAxis = true,\n  yFormatter,\n  yDomain,\n  referenceLines,\n  tooltip = \"line\",\n  chartClassName,\n  ...frame\n}: ChartAreaProps) {\n  const uid = React.useId().replace(/:/g, \"\")\n  const expanded = stack === \"expanded\"\n  return (\n    <ChartFrame data={data} xKey={xKey} series={series} summaryMode=\"trend\" skeleton=\"area\" chartClassName={cn(\"[&_.recharts-area-dot]:stroke-card\", chartClassName)} {...frame}>\n      {(chart) => {\n        const compact = new Intl.NumberFormat(chart.locale, { notation: \"compact\", maximumFractionDigits: 1 })\n        const scale = expanded || yDomain ? undefined : niceScale({ data, keys: chart.visible, stacked: stack === \"stacked\" })\n        return (\n          <AreaChart data={data} stackOffset={expanded ? \"expand\" : \"none\"} margin={chart.margin({ top: 8, right: 8, left: 0, bottom: 0 })} accessibilityLayer>\n            <defs>\n              {fillMode === \"gradient\"\n                ? series.map((s) => (\n                    <linearGradient key={s.key} id={`${uid}-g-${s.key}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                      <stop offset=\"5%\" stopColor={chart.color(s.key)} stopOpacity={stack === \"none\" ? 0.38 : 0.55} />\n                      <stop offset=\"95%\" stopColor={chart.color(s.key)} stopOpacity={stack === \"none\" ? 0.02 : 0.18} />\n                    </linearGradient>\n                  ))\n                : null}\n              {chart.defs}\n            </defs>\n            <CartesianGrid vertical={grid === \"both\"} horizontal={grid !== \"none\"} />\n            <XAxis dataKey={xKey} tickLine={false} axisLine={false} tickMargin={8} minTickGap={24} reversed={chart.rtl} tickFormatter={(v: unknown) => chart.formatCategory(v)} padding={chart.rtl ? { left: 16, right: 8 } : { left: 8, right: 16 }} />\n            {yAxis ? (\n              <YAxis\n                width=\"auto\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                orientation={chart.rtl ? \"right\" : \"left\"}\n                domain={expanded ? [0, 1] : (yDomain ?? scale?.domain)}\n                ticks={expanded ? undefined : (scale?.ticks ?? domainTicks(yDomain))}\n                tickFormatter={(v: number) => (expanded ? `${Math.round(v * 100)}%` : yFormatter ? yFormatter(v) : compact.format(v))}\n              />\n            ) : null}\n            {referenceLines?.map((r) => (\n              <ReferenceLine key={r.label} y={r.y} stroke=\"var(--muted-foreground)\" strokeDasharray=\"4 4\" strokeOpacity={0.7} label={{ value: r.label, position: chart.rtl ? \"insideTopLeft\" : \"insideTopRight\", fill: \"var(--muted-foreground)\", fontSize: 11 }} />\n            ))}\n            {tooltip !== \"none\" ? <ChartTooltip cursor={{ strokeDasharray: \"3 3\" }} content={<ChartTooltipContent indicator={tooltip} />} /> : null}\n            {series.map((s) => (\n              <Area\n                key={s.key}\n                dataKey={s.key}\n                type={curve}\n                hide={chart.isHidden(s.key)}\n                stackId={stack === \"none\" ? undefined : \"stack\"}\n                stroke={chart.color(s.key)}\n                strokeWidth={2}\n                fill={fillMode === \"none\" ? \"transparent\" : chart.patterns ? chart.fill(s.key) : fillMode === \"solid\" ? chart.color(s.key) : `url(#${uid}-g-${s.key})`}\n                fillOpacity={fillMode === \"solid\" && !chart.patterns ? (stack === \"none\" ? 0.18 : 0.7) : 1}\n                dot={dots ? { r: 3, strokeWidth: 2, fill: \"var(--card)\" } : false}\n                activeDot={{ r: 4 }}\n                isAnimationActive={chart.animate}\n                animationDuration={700}\n              />\n            ))}\n          </AreaChart>\n        )\n      }}\n    </ChartFrame>\n  )\n}\n\nexport { ChartArea, type ChartAreaProps }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/chart-area.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "chart",
      "area",
      "line",
      "stacked",
      "trend",
      "recharts",
      "graph",
      "timeseries"
    ],
    "version": "1.0.0",
    "updated": "2026-10-18",
    "ai": {
      "summary": "<ChartArea title description data xKey series={[{ key, label, color? }]} />. curve: monotone | linear | step | natural. stack: none | stacked | expanded (percent). fillMode: gradient | solid | none. Also dots, grid, yFormatter, yDomain, referenceLines, tooltip, legend, patterns, state and every ChartFrame prop. Colors come from the theme's chart colors in order.",
      "whenToUse": [
        "Trends over time, especially more than one series",
        "Part-to-whole over time (stacked or expanded)"
      ],
      "whenNotToUse": [
        "Comparing a few categories (use chart-bar)",
        "Exact values matter more than shape (use chart-line with dots or the table view)"
      ],
      "composesWith": [
        "chart-frame",
        "segmented-control",
        "stat-card"
      ],
      "a11y": [
        {
          "keys": "Arrow keys",
          "action": "Move between data points (accessibilityLayer)"
        },
        {
          "keys": "Tab, Enter / Space",
          "action": "Legend buttons switch series; the Chart / Table switch shows the same data as a table"
        }
      ],
      "customization": [
        "curve, stack and fillMode",
        "series color: any CSS color or token",
        "yFormatter and valueFormatter for units",
        "referenceLines for targets and limits",
        "yDomain to fix the axis"
      ]
    },
    "examples": [
      "chart-area-demo",
      "chart-area-stacked",
      "chart-area-expanded",
      "chart-area-step",
      "chart-area-dots",
      "chart-area-patterns",
      "chart-area-target",
      "chart-area-interactive",
      "chart-area-states"
    ],
    "url": "https://ui.ballmac.com/components/chart-area"
  },
  "categories": [
    "data-display"
  ],
  "type": "registry:ui"
}