{
  "example": "import { AreaChart } from \"@godxjp/ui/charts\";\n\n<AreaChart\n  label={t(\"dashboard.trafficByChannel\")}\n  data={data}\n  categoryKey=\"day\"\n  series={[\n    { dataKey: \"organic\", label: t(\"channel.organic\") },\n    { dataKey: \"paid\", label: t(\"channel.paid\") },\n  ]}\n  stacked\n/>",
  "group": "data-display",
  "importPath": "@godxjp/ui/charts",
  "name": "AreaChart",
  "props": [
    {
      "description": "Row data: one category per row with a numeric value per series.",
      "name": "data",
      "required": true,
      "type": "ChartDatum[]"
    },
    {
      "description": "Plotted series: { dataKey, label?, color? }.",
      "name": "series",
      "required": true,
      "type": "ChartSeriesProp[]"
    },
    {
      "description": "Key into each datum holding the x-axis category label.",
      "name": "categoryKey",
      "required": true,
      "type": "string"
    },
    {
      "description": "Accessible name + visible caption.",
      "name": "label",
      "required": true,
      "type": "string"
    },
    {
      "defaultValue": "true",
      "description": "Paint `label` as a visible caption. Set false when a CardTitle or section heading already says it — the caption stays in the DOM as sr-only, so role=img keeps its accessible name.",
      "name": "showCaption",
      "type": "boolean"
    },
    {
      "description": "Extra context appended to the screen-reader description.",
      "name": "description",
      "type": "string"
    },
    {
      "defaultValue": "\"md\"",
      "description": "Canvas height preset. Ignored when `height` is set.",
      "name": "size",
      "type": "\"xs\" | \"sm\" | \"md\" | \"lg\""
    },
    {
      "description": "Explicit canvas height in px (overrides `size`).",
      "name": "height",
      "type": "number"
    },
    {
      "defaultValue": "true",
      "description": "Show the series legend.",
      "name": "showLegend",
      "type": "boolean"
    },
    {
      "defaultValue": "true",
      "description": "Show the cartesian background grid.",
      "name": "showGrid",
      "type": "boolean"
    },
    {
      "description": "Locale-aware formatting for ticks + tooltip values.",
      "name": "numberFormat",
      "type": "Intl.NumberFormatOptions"
    },
    {
      "defaultValue": "false",
      "description": "Stack series areas instead of overlaying them.",
      "name": "stacked",
      "type": "boolean"
    },
    {
      "description": "Explicit [min, max] for the VALUE axis (y vertical, x on a horizontal bar). Omit to let the data set it. A non-zero baseline is a charting-ETHICS call: legitimate where the SHAPE is the message and zero is not a reference (price, temperature, an index, a latency percentile), misleading wherever the reader compares magnitudes — which is every bar chart.",
      "name": "valueDomain",
      "type": "[number, number]"
    },
    {
      "description": "Explicit tick positions on the value axis, in data units. Values outside valueDomain are not drawn.",
      "name": "valueTicks",
      "type": "number[]"
    },
    {
      "defaultValue": "false",
      "description": "Render smooth (monotone) areas instead of straight segments.",
      "name": "curved",
      "type": "boolean"
    },
    {
      "defaultValue": "false",
      "description": "Draw a marker at every data point. Off by default — markers crowd a dense series.",
      "name": "showDots",
      "type": "boolean"
    },
    {
      "description": "Message shown when `data` is empty.",
      "name": "emptyMessage",
      "type": "string"
    }
  ],
  "related": [
    "LineChart — when only the trend line matters, not the filled magnitude.",
    "BarChart — discrete category comparison."
  ],
  "rules": [],
  "tagline": "Magnitude over an ordered category axis — overlay or `stacked` areas, optional `curved` smoothing, localized formatting + text alternative. Data-visualization graph / plot.",
  "usage": [
    "DO import from the charts entry: `import { AreaChart } from \"@godxjp/ui/charts\";` (recharts optional peer required).",
    "DO import only the chart a screen uses — `import { AreaChart } from \"@godxjp/ui/charts/area-chart\";` — when the `./charts` barrel should not link the whole chart family. Without the `recharts` peer the build then fails ONCE, naming the package and the fix.",
    "DO use `stacked` to show how parts accumulate into a total over time.",
    "DON'T overlay more than 2-3 unstacked areas — fill opacity makes dense overlays unreadable; switch to LineChart.",
    "DO split the band's hue from the line's with `series[].fillColor` when a brand specifies both (a dark line over a lighter wash). The band's DENSITY is the `--chart-area-fill-alpha` theme token, not a prop.",
    "DON'T tune the band by dropping a page-local CSS rule on `.recharts-area-area` — `--chart-area-fill-alpha` is the supported knob and it follows a scoped [data-tenant] region."
  ],
  "useCases": [
    "Cumulative volume over time (e.g. total transactions per day).",
    "Stacked composition trend (traffic sources, revenue streams)."
  ]
}