{
  "example": "import { LineChart } from \"@godxjp/ui/charts\";\n\n<LineChart\n  label={t(\"dashboard.revenueTrend\")}\n  data={data}\n  categoryKey=\"month\"\n  series={[\n    { dataKey: \"plan\", label: t(\"metric.plan\") },\n    { dataKey: \"actual\", label: t(\"metric.actual\") },\n  ]}\n  numberFormat={{ style: \"currency\", currency: \"JPY\" }}\n/>",
  "group": "data-display",
  "importPath": "@godxjp/ui/charts",
  "name": "LineChart",
  "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?, fillColor? }. Colour defaults to the --chart-1..6 palette; fillColor is the AreaChart band only.",
      "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 (role=img needs a name).",
      "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 axis ticks + tooltip values.",
      "name": "numberFormat",
      "type": "Intl.NumberFormatOptions"
    },
    {
      "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) lines 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 (defaults to a localized 'no data').",
      "name": "emptyMessage",
      "type": "string"
    }
  ],
  "related": [
    "AreaChart — use when the filled magnitude under the line matters (cumulative/stacked volume).",
    "BarChart — use for discrete category comparison rather than a continuous trend.",
    "DataTable — use when exact per-row figures matter more than the trend shape."
  ],
  "rules": [],
  "tagline": "Trends over an ordered category axis — one or more series, locale-formatted ticks/tooltips, screen-reader text alternative built in. Data-visualization graph / plot.",
  "usage": [
    "DO import from the tree-shaken charts entry: `import { LineChart } from \"@godxjp/ui/charts\";`. Importing any other subpath never pulls in recharts.",
    "DO import only the chart a screen uses — `import { LineChart } from \"@godxjp/ui/charts/line-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 install the `recharts` optional peer dependency in the consuming app — charts are the only part of @godxjp/ui that needs it, so apps without charts never pay for it.",
    "DO pass an i18n'd `label` — it is both the visible caption and the accessible name; the component also emits a screen-reader list of the plotted values (WCAG 1.1.1).",
    "DO pre-translate each series' `label`; pass `numberFormat` (e.g. { style: 'currency', currency: 'JPY' }) and the axis/tooltip numbers localize automatically via Intl.",
    "DON'T hand-roll an SVG/canvas chart or drop raw recharts into a page — LineChart owns the colour tokens, locale formatting, empty state, and accessibility wiring.",
    "DO retune the line weight and the grid dash with the `--chart-series-stroke-width` / `--chart-grid-line-dash` theme tokens, globally or on a scoped [data-tenant] region. They are house style; there is no prop for them.",
    "DON'T reach for `valueDomain` to make a flat trend look dramatic — cropping the axis magnifies every wobble and the reader cannot tell a 2% drift from a collapse. Crop only where zero is not a meaningful reference, and say the range."
  ],
  "useCases": [
    "Revenue / KPI trend over months in a dashboard.",
    "Multi-series comparison (e.g. plan vs actual) across a time axis.",
    "Any continuous metric where the shape of the trend is the message."
  ]
}