@krizaka/charts 0.0.0-stage → 0.1.0

package/registry/line-chart.json

@@ -0,0 +1,792 @@
+{
+  "name": "line-chart",
+  "package": "@krizaka/charts",
+  "type": "chart",
+  "title": "Line chart",
+  "summary": "Change over time: one line per series, the last value written at its end, thresholds, markers and a crosshair tooltip.",
+  "description": "Change over time: one line per series, the last value written at its end, thresholds, markers and a crosshair tooltip.",
+  "status": "beta",
+  "category": "charts",
+  "platforms": "both",
+  "engine": "svg",
+  "whenToUse": [
+    "A trend over time: a creator's earnings per month, credits used per day, latency per hour.",
+    "Two or three series compared over the same period (this year and last, two plans).",
+    "A goal or a limit to read against the trend: a payout threshold, an objective, with `thresholds`."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "Amounts compared across categories that are not time.",
+      "use": "bar-chart"
+    },
+    {
+      "when": "A volume whose parts add up to a total over time.",
+      "use": "area-chart"
+    },
+    {
+      "when": "A trend in a sentence, a table cell or a stat tile.",
+      "use": "sparkline"
+    }
+  ],
+  "bestPractices": [
+    "Give dates as ISO strings (`2026-04`, `2026-04-12`): the axis writes them in the reader's locale, by their precision.",
+    "Store money as integer minor units and say so with `format={{ style: \"money\", currency }}`: the axis goes compact, the tooltip exact.",
+    "Keep to three series or fewer; past that, split into small multiples or fold the rest into one series.",
+    "Dash a forecast or a previous period (`dashed`), never a different colour for the same measure.",
+    "Write the title as what the chart answers (“Earnings, last 6 months”): it is the accessible name."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Tab",
+        "action": "Moves the focus to the plot (one tab stop), then to the data and export buttons."
+      },
+      {
+        "keys": "Arrow keys",
+        "action": "Walk the points one by one: each is announced and its tooltip shown."
+      },
+      {
+        "keys": "Home / End",
+        "action": "Jump to the first or the last point."
+      },
+      {
+        "keys": "Esc",
+        "action": "Hides the tooltip and clears the active point."
+      },
+      {
+        "keys": "Enter",
+        "action": "Selects the active point (calls `onSelect` with its row)."
+      }
+    ],
+    "notes": [
+      "The plot is a group named by the title and described by a summary written from the data (extremes, trend), read before anything else.",
+      "The data table is always in the page for assistive technology; “Show data” reveals it for everyone.",
+      "Colour never carries a meaning alone: a legend from two series, direct labels, the table.",
+      "The entrance plays once, when the chart comes on screen, and never under reduced motion."
+    ]
+  },
+  "related": [
+    "area-chart",
+    "bar-chart",
+    "sparkline",
+    "charts-provider"
+  ],
+  "source": "packages/charts/src/meta/line-chart.ts",
+  "install": {
+    "web": "npm install @krizaka/charts",
+    "native": "npx expo install react-native-svg\nnpm install @krizaka/charts"
+  },
+  "web": {
+    "entry": "@krizaka/charts/line",
+    "import": "import { LineChart } from \"@krizaka/charts/line\";",
+    "props": [
+      {
+        "component": "LineChart",
+        "description": "Change over time: one line per series, the last value written at its end, a crosshair tooltip, the keyboard.",
+        "props": [
+          {
+            "name": "data",
+            "type": "readonly T[]",
+            "default": null,
+            "description": "The rows, in the order of the x axis.",
+            "required": true
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.",
+            "required": true
+          },
+          {
+            "name": "brand",
+            "type": "BrandId",
+            "default": null,
+            "description": "The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\nwhen the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "A class on the figure (layout: margins, grid placement).",
+            "required": false
+          },
+          {
+            "name": "curve",
+            "type": "Curve",
+            "default": null,
+            "description": "The shape between points: `monotone` (default, never overshoots), `linear`, `step` (a value that holds).",
+            "required": false
+          },
+          {
+            "name": "dataTable",
+            "type": "boolean",
+            "default": null,
+            "description": "The \"Show data\" button (the table is in the page for screen readers either way). Default true.",
+            "required": false
+          },
+          {
+            "name": "description",
+            "type": "ReactNode",
+            "default": null,
+            "description": "A sentence under the title: the period, the unit, the source.",
+            "required": false
+          },
+          {
+            "name": "dots",
+            "type": "boolean",
+            "default": null,
+            "description": "A dot on every point (short series). Default false: the end of each line carries one.",
+            "required": false
+          },
+          {
+            "name": "empty",
+            "type": "ReactNode",
+            "default": null,
+            "description": "What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of\n@krizaka /ui fits.",
+            "required": false
+          },
+          {
+            "name": "endLabels",
+            "type": "boolean",
+            "default": "true",
+            "description": "Write the last value at the end of each line (up to three series). Default true.",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The data could not be loaded: `true` says the default words, a node says yours (a retry button…).",
+            "required": false
+          },
+          {
+            "name": "exportable",
+            "type": "boolean | readonly ExportFormat[]",
+            "default": null,
+            "description": "Export buttons: `true` for PNG, SVG and CSV, or the formats you want.",
+            "required": false
+          },
+          {
+            "name": "format",
+            "type": "ValueFormat",
+            "default": null,
+            "description": "How the values are written (axis, tooltip, table, summary). Default `\"number\"`.",
+            "required": false
+          },
+          {
+            "name": "height",
+            "type": "number",
+            "default": null,
+            "description": "The height of the plot in pixels. Default 280 (a sparkline: 32).",
+            "required": false
+          },
+          {
+            "name": "hideTitle",
+            "type": "boolean",
+            "default": null,
+            "description": "Visually hide the title (it stays the chart's accessible name): a card that already has its heading.",
+            "required": false
+          },
+          {
+            "name": "id",
+            "type": "string",
+            "default": null,
+            "description": "The id of the figure.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "ChartLabelsInput",
+            "default": null,
+            "description": "The words, translated: the buttons, the states, the written summary.",
+            "required": false
+          },
+          {
+            "name": "legend",
+            "type": "boolean",
+            "default": null,
+            "description": "Show the legend (from two series). Default true.",
+            "required": false
+          },
+          {
+            "name": "live",
+            "type": "boolean",
+            "default": null,
+            "description": "Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.",
+            "required": false
+          },
+          {
+            "name": "loading",
+            "type": "boolean",
+            "default": null,
+            "description": "The data is on its way: a skeleton of the chart, announced once.",
+            "required": false
+          },
+          {
+            "name": "locale",
+            "type": "Locale",
+            "default": null,
+            "description": "The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`.",
+            "required": false
+          },
+          {
+            "name": "markers",
+            "type": "readonly Marker[]",
+            "default": null,
+            "description": "Vertical markers at a category: a launch, an incident.",
+            "required": false
+          },
+          {
+            "name": "onSelect",
+            "type": "((datum: T, index: number) => void)",
+            "default": null,
+            "description": "Called with the row when a point or a bar is clicked (or Enter is pressed on it).",
+            "required": false
+          },
+          {
+            "name": "series",
+            "type": "readonly SeriesSpec<T>[]",
+            "default": null,
+            "description": "The series to draw, each with its field and its name; the palette follows their order.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "CSSProperties",
+            "default": null,
+            "description": "Inline style on the figure (layout only: colours come from the tokens).",
+            "required": false
+          },
+          {
+            "name": "summary",
+            "type": "\"hidden\" | \"visible\"",
+            "default": null,
+            "description": "The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`).",
+            "required": false
+          },
+          {
+            "name": "summaryText",
+            "type": "string",
+            "default": null,
+            "description": "Your own summary instead of the generated one (still read first by screen readers).",
+            "required": false
+          },
+          {
+            "name": "thresholds",
+            "type": "readonly Threshold[]",
+            "default": null,
+            "description": "Horizontal lines at a value: a goal, a payout threshold.",
+            "required": false
+          },
+          {
+            "name": "x",
+            "type": "string | ((datum: T, index: number) => unknown)",
+            "default": null,
+            "description": "The field (or function) of the category: a month (`\"2026-04\"`), a day, a label. Default: the row's position.",
+            "required": false
+          },
+          {
+            "name": "xFormat",
+            "type": "CategoryFormat",
+            "default": null,
+            "description": "How the categories are written. Default: dates by their precision (`2026-04` → `Apr 2026`), text as is.",
+            "required": false
+          },
+          {
+            "name": "xLabel",
+            "type": "string",
+            "default": null,
+            "description": "The header of the categories in the data table (`Month`).",
+            "required": false
+          },
+          {
+            "name": "y",
+            "type": "string | ((datum: T, index: number) => number | null)",
+            "default": null,
+            "description": "A single series: its field. Use `series` for several.",
+            "required": false
+          },
+          {
+            "name": "yLabel",
+            "type": "string",
+            "default": null,
+            "description": "The name of the single `y` series (legend, tooltip, table). Default: the field's name.",
+            "required": false
+          },
+          {
+            "name": "zero",
+            "type": "boolean",
+            "default": null,
+            "description": "Start the value axis at zero. Default: true for bars and areas; for lines, unless the values sit far from zero.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "creator-earnings",
+        "title": "Creator earnings",
+        "description": "Six months of a creator's earnings and tips in euros, with the payout threshold.",
+        "path": "examples/line-chart/creator-earnings.tsx",
+        "module": "@krizaka/charts/registry/examples/line-chart/creator-earnings",
+        "code": "import { LineChart } from \"@krizaka/charts/line\";\n\n// Amounts in cents, as the ledger stores them.\nconst earnings = [\n  { month: \"2026-04\", earnings: 182_000, tips: 21_000 },\n  { month: \"2026-05\", earnings: 164_000, tips: 18_500 },\n  { month: \"2026-06\", earnings: 231_000, tips: 26_000 },\n  { month: \"2026-07\", earnings: 298_000, tips: 31_000 },\n  { month: \"2026-08\", earnings: 276_000, tips: 35_500 },\n  { month: \"2026-09\", earnings: 342_000, tips: 41_000 },\n];\n\nexport default function CreatorEarnings() {\n  return (\n    <LineChart\n      title=\"Earnings, last 6 months\"\n      description=\"Video sales and tips, before fees\"\n      data={earnings}\n      x=\"month\"\n      xLabel=\"Month\"\n      series={[\n        { key: \"earnings\", label: \"Video sales\" },\n        { key: \"tips\", label: \"Tips\" },\n      ]}\n      format={{ style: \"money\", currency: \"EUR\" }}\n      thresholds={[{ value: 250_000, label: \"Payout threshold\", tone: \"success\" }]}\n      exportable\n    />\n  );\n}\n"
+      },
+      {
+        "name": "forecast",
+        "title": "Forecast",
+        "description": "The months to come dashed after the actual ones, a marker on a launch.",
+        "path": "examples/line-chart/forecast.tsx",
+        "module": "@krizaka/charts/registry/examples/line-chart/forecast",
+        "code": "import { LineChart } from \"@krizaka/charts/line\";\n\nconst requests = [\n  { week: \"2026-07-06\", actual: 41_200 },\n  { week: \"2026-07-13\", actual: 43_900 },\n  { week: \"2026-07-20\", actual: 47_100 },\n  { week: \"2026-07-27\", actual: 52_800, forecast: 52_800 },\n  { week: \"2026-08-03\", forecast: 57_400 },\n  { week: \"2026-08-10\", forecast: 61_000 },\n  { week: \"2026-08-17\", forecast: 66_300 },\n];\n\nexport default function Forecast() {\n  return (\n    <LineChart\n      title=\"Inference requests per week\"\n      description=\"Actual, then forecast\"\n      data={requests}\n      x=\"week\"\n      xFormat=\"day\"\n      series={[\n        { key: \"actual\", label: \"Actual\" },\n        { key: \"forecast\", label: \"Forecast\", color: 1, dashed: true },\n      ]}\n      format=\"compact\"\n      markers={[{ x: \"2026-07-27\", label: \"Studio launch\", tone: \"accent\" }]}\n      dots\n    />\n  );\n}\n"
+      },
+      {
+        "name": "live-jobs",
+        "title": "Live data",
+        "description": "A sliding window of jobs per minute, appended as they arrive (`useSlidingWindow`, `live`).",
+        "path": "examples/line-chart/live-jobs.tsx",
+        "module": "@krizaka/charts/registry/examples/line-chart/live-jobs",
+        "code": "\"use client\";\nimport { LineChart } from \"@krizaka/charts/line\";\nimport { useSlidingWindow } from \"@krizaka/charts/provider\";\n\ntype Minute = { at: string; completed: number };\nconst start: Minute[] = [18, 22, 19, 25, 31, 28, 26, 33, 37, 35].map((completed, i) => ({ at: `2026-10-11T14:${String(20 + i).padStart(2, \"0\")}Z`, completed }));\n\nexport default function LiveJobs() {\n  // The last 10 minutes; in an app, `push` is called by a server-sent event.\n  const { data, push } = useSlidingWindow<Minute>(10, start);\n  const next = () => {\n    const last = new Date(data[data.length - 1]!.at);\n    push({ at: new Date(last.getTime() + 60_000).toISOString(), completed: 20 + ((data.length * 7) % 19) });\n  };\n  return (\n    <div style={{ display: \"grid\", gap: 8 }}>\n      <LineChart title=\"Jobs completed per minute\" data={data} x=\"at\" xFormat=\"time\" y=\"completed\" yLabel=\"Jobs\" format=\"integer\" live dots />\n      <button type=\"button\" onClick={next} style={{ justifySelf: \"start\", padding: \"4px 10px\", borderRadius: 8, border: \"1px solid var(--kz-border-default)\", background: \"var(--kz-surface-2)\", color: \"var(--kz-text-primary)\" }}>\n        Next minute\n      </button>\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "states",
+        "title": "Loading, empty, error",
+        "description": "The three states at the chart's own height: no layout shift when the data arrives.",
+        "path": "examples/line-chart/states.tsx",
+        "module": "@krizaka/charts/registry/examples/line-chart/states",
+        "code": "import { LineChart } from \"@krizaka/charts/line\";\n\nconst series = [{ key: \"views\", label: \"Views\" }] as const;\n\nexport default function States() {\n  return (\n    <div style={{ display: \"grid\", gap: 24 }}>\n      <LineChart title=\"Views (loading)\" data={[]} x=\"day\" series={series} height={140} loading />\n      <LineChart title=\"Views (no data yet)\" data={[]} x=\"day\" series={series} height={140} />\n      <LineChart title=\"Views (failed)\" data={[]} x=\"day\" series={series} height={140} error />\n    </div>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": {
+    "entry": "@krizaka/charts/native",
+    "import": "import { LineChart } from \"@krizaka/charts/native\";",
+    "differences": [
+      "No data table or export: the plot is one adjustable element whose label is the title and the summary; swipe up and down to hear each point.",
+      "A tap selects the nearest point and writes it under the chart; no hover.",
+      "No markers, no end labels; `scheme` and `theme` (from @krizaka/ui/native's `useTheme()`) follow the app's theme."
+    ],
+    "props": [
+      {
+        "component": "LineChart",
+        "description": "Change over time (React Native): one line per series.",
+        "props": [
+          {
+            "name": "data",
+            "type": "readonly T[]",
+            "default": null,
+            "description": "The rows, in the order of the x axis.",
+            "required": true
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "What the chart shows: its heading and accessible name.",
+            "required": true
+          },
+          {
+            "name": "brand",
+            "type": "BrandId",
+            "default": null,
+            "description": "The brand whose palette leads. Default Krizaka.",
+            "required": false
+          },
+          {
+            "name": "curve",
+            "type": "Curve",
+            "default": "monotone",
+            "description": "`monotone` (default), `linear` or `step`.",
+            "required": false
+          },
+          {
+            "name": "empty",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Shown instead of the plot when there is nothing to draw. Default: the `empty` label.",
+            "required": false
+          },
+          {
+            "name": "format",
+            "type": "ValueFormat",
+            "default": null,
+            "description": "How the values are written.",
+            "required": false
+          },
+          {
+            "name": "height",
+            "type": "number",
+            "default": null,
+            "description": "The plot's height.",
+            "required": false
+          },
+          {
+            "name": "hideTitle",
+            "type": "boolean",
+            "default": null,
+            "description": "Hide the heading (it stays the accessible name).",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "ChartLabelsInput",
+            "default": null,
+            "description": "The words: the readout, the summary.",
+            "required": false
+          },
+          {
+            "name": "loading",
+            "type": "boolean",
+            "default": null,
+            "description": "The data is on its way.",
+            "required": false
+          },
+          {
+            "name": "locale",
+            "type": "Locale",
+            "default": null,
+            "description": "The locale of every figure and date. Default `\"en-US\"`.",
+            "required": false
+          },
+          {
+            "name": "scheme",
+            "type": "Mode",
+            "default": null,
+            "description": "Dark or light. Default: the device's (pass `useTheme().scheme` of\n@krizaka /ui/native to follow the app).",
+            "required": false
+          },
+          {
+            "name": "series",
+            "type": "readonly SeriesSpec<T>[]",
+            "default": null,
+            "description": "The series, each with its field and name.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "ViewStyle",
+            "default": null,
+            "description": "The style of the chart's container (layout only: colours come from the theme).",
+            "required": false
+          },
+          {
+            "name": "theme",
+            "type": "Partial<ChartTheme>",
+            "default": null,
+            "description": "The app's colour roles (`useTheme().theme` of\n@krizaka /ui/native): a product's brand overrides apply.",
+            "required": false
+          },
+          {
+            "name": "thresholds",
+            "type": "readonly Threshold[]",
+            "default": null,
+            "description": "Horizontal lines at a value.",
+            "required": false
+          },
+          {
+            "name": "x",
+            "type": "string | ((datum: T, index: number) => unknown)",
+            "default": null,
+            "description": "The field (or function) of the category.",
+            "required": false
+          },
+          {
+            "name": "xFormat",
+            "type": "CategoryFormat",
+            "default": null,
+            "description": "How the categories are written.",
+            "required": false
+          },
+          {
+            "name": "y",
+            "type": "string | ((datum: T, index: number) => number | null)",
+            "default": null,
+            "description": "A single series: its field.",
+            "required": false
+          },
+          {
+            "name": "yLabel",
+            "type": "string",
+            "default": null,
+            "description": "The name of the single `y` series.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "creator-earnings",
+        "title": "Creator earnings",
+        "description": "Six months of earnings and tips, the payout threshold.",
+        "path": "examples/line-chart/native/creator-earnings.tsx",
+        "module": "@krizaka/charts/registry/examples/line-chart/native/creator-earnings",
+        "code": "import { LineChart } from \"@krizaka/charts/native\";\n\nconst earnings = [\n  { month: \"2026-04\", earnings: 182_000, tips: 21_000 },\n  { month: \"2026-05\", earnings: 164_000, tips: 18_500 },\n  { month: \"2026-06\", earnings: 231_000, tips: 26_000 },\n  { month: \"2026-07\", earnings: 298_000, tips: 31_000 },\n  { month: \"2026-08\", earnings: 276_000, tips: 35_500 },\n  { month: \"2026-09\", earnings: 342_000, tips: 41_000 },\n];\n\nexport default function CreatorEarnings() {\n  return (\n    <LineChart\n      title=\"Earnings, last 6 months\"\n      data={earnings}\n      x=\"month\"\n      series={[\n        { key: \"earnings\", label: \"Video sales\" },\n        { key: \"tips\", label: \"Tips\" },\n      ]}\n      format={{ style: \"money\", currency: \"EUR\" }}\n      thresholds={[{ value: 250_000, label: \"Payout threshold\", tone: \"success\" }]}\n    />\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/line-chart/native/creator-earnings.dark.png",
+          "light": "examples/line-chart/native/creator-earnings.light.png"
+        }
+      }
+    ]
+  },
+  "files": [],
+  "dependencies": [
+    "@krizaka/intl@workspace:^",
+    "d3-geo@^3.1.1",
+    "echarts@^6.1.0",
+    "topojson-client@^3.1.0"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "examples/line-chart/creator-earnings.tsx",
+    "content": "import { LineChart } from \"@krizaka/charts/line\";\n\n// Amounts in cents, as the ledger stores them.\nconst earnings = [\n  { month: \"2026-04\", earnings: 182_000, tips: 21_000 },\n  { month: \"2026-05\", earnings: 164_000, tips: 18_500 },\n  { month: \"2026-06\", earnings: 231_000, tips: 26_000 },\n  { month: \"2026-07\", earnings: 298_000, tips: 31_000 },\n  { month: \"2026-08\", earnings: 276_000, tips: 35_500 },\n  { month: \"2026-09\", earnings: 342_000, tips: 41_000 },\n];\n\nexport default function CreatorEarnings() {\n  return (\n    <LineChart\n      title=\"Earnings, last 6 months\"\n      description=\"Video sales and tips, before fees\"\n      data={earnings}\n      x=\"month\"\n      xLabel=\"Month\"\n      series={[\n        { key: \"earnings\", label: \"Video sales\" },\n        { key: \"tips\", label: \"Tips\" },\n      ]}\n      format={{ style: \"money\", currency: \"EUR\" }}\n      thresholds={[{ value: 250_000, label: \"Payout threshold\", tone: \"success\" }]}\n      exportable\n    />\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "LineChart",
+      "description": "Change over time: one line per series, the last value written at its end, a crosshair tooltip, the keyboard.",
+      "props": [
+        {
+          "name": "data",
+          "type": "readonly T[]",
+          "default": null,
+          "description": "The rows, in the order of the x axis.",
+          "required": true
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "default": null,
+          "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.",
+          "required": true
+        },
+        {
+          "name": "brand",
+          "type": "BrandId",
+          "default": null,
+          "description": "The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\nwhen the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "A class on the figure (layout: margins, grid placement).",
+          "required": false
+        },
+        {
+          "name": "curve",
+          "type": "Curve",
+          "default": null,
+          "description": "The shape between points: `monotone` (default, never overshoots), `linear`, `step` (a value that holds).",
+          "required": false
+        },
+        {
+          "name": "dataTable",
+          "type": "boolean",
+          "default": null,
+          "description": "The \"Show data\" button (the table is in the page for screen readers either way). Default true.",
+          "required": false
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A sentence under the title: the period, the unit, the source.",
+          "required": false
+        },
+        {
+          "name": "dots",
+          "type": "boolean",
+          "default": null,
+          "description": "A dot on every point (short series). Default false: the end of each line carries one.",
+          "required": false
+        },
+        {
+          "name": "empty",
+          "type": "ReactNode",
+          "default": null,
+          "description": "What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of\n@krizaka /ui fits.",
+          "required": false
+        },
+        {
+          "name": "endLabels",
+          "type": "boolean",
+          "default": "true",
+          "description": "Write the last value at the end of each line (up to three series). Default true.",
+          "required": false
+        },
+        {
+          "name": "error",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The data could not be loaded: `true` says the default words, a node says yours (a retry button…).",
+          "required": false
+        },
+        {
+          "name": "exportable",
+          "type": "boolean | readonly ExportFormat[]",
+          "default": null,
+          "description": "Export buttons: `true` for PNG, SVG and CSV, or the formats you want.",
+          "required": false
+        },
+        {
+          "name": "format",
+          "type": "ValueFormat",
+          "default": null,
+          "description": "How the values are written (axis, tooltip, table, summary). Default `\"number\"`.",
+          "required": false
+        },
+        {
+          "name": "height",
+          "type": "number",
+          "default": null,
+          "description": "The height of the plot in pixels. Default 280 (a sparkline: 32).",
+          "required": false
+        },
+        {
+          "name": "hideTitle",
+          "type": "boolean",
+          "default": null,
+          "description": "Visually hide the title (it stays the chart's accessible name): a card that already has its heading.",
+          "required": false
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "default": null,
+          "description": "The id of the figure.",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "ChartLabelsInput",
+          "default": null,
+          "description": "The words, translated: the buttons, the states, the written summary.",
+          "required": false
+        },
+        {
+          "name": "legend",
+          "type": "boolean",
+          "default": null,
+          "description": "Show the legend (from two series). Default true.",
+          "required": false
+        },
+        {
+          "name": "live",
+          "type": "boolean",
+          "default": null,
+          "description": "Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.",
+          "required": false
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "default": null,
+          "description": "The data is on its way: a skeleton of the chart, announced once.",
+          "required": false
+        },
+        {
+          "name": "locale",
+          "type": "Locale",
+          "default": null,
+          "description": "The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`.",
+          "required": false
+        },
+        {
+          "name": "markers",
+          "type": "readonly Marker[]",
+          "default": null,
+          "description": "Vertical markers at a category: a launch, an incident.",
+          "required": false
+        },
+        {
+          "name": "onSelect",
+          "type": "((datum: T, index: number) => void)",
+          "default": null,
+          "description": "Called with the row when a point or a bar is clicked (or Enter is pressed on it).",
+          "required": false
+        },
+        {
+          "name": "series",
+          "type": "readonly SeriesSpec<T>[]",
+          "default": null,
+          "description": "The series to draw, each with its field and its name; the palette follows their order.",
+          "required": false
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "default": null,
+          "description": "Inline style on the figure (layout only: colours come from the tokens).",
+          "required": false
+        },
+        {
+          "name": "summary",
+          "type": "\"hidden\" | \"visible\"",
+          "default": null,
+          "description": "The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`).",
+          "required": false
+        },
+        {
+          "name": "summaryText",
+          "type": "string",
+          "default": null,
+          "description": "Your own summary instead of the generated one (still read first by screen readers).",
+          "required": false
+        },
+        {
+          "name": "thresholds",
+          "type": "readonly Threshold[]",
+          "default": null,
+          "description": "Horizontal lines at a value: a goal, a payout threshold.",
+          "required": false
+        },
+        {
+          "name": "x",
+          "type": "string | ((datum: T, index: number) => unknown)",
+          "default": null,
+          "description": "The field (or function) of the category: a month (`\"2026-04\"`), a day, a label. Default: the row's position.",
+          "required": false
+        },
+        {
+          "name": "xFormat",
+          "type": "CategoryFormat",
+          "default": null,
+          "description": "How the categories are written. Default: dates by their precision (`2026-04` → `Apr 2026`), text as is.",
+          "required": false
+        },
+        {
+          "name": "xLabel",
+          "type": "string",
+          "default": null,
+          "description": "The header of the categories in the data table (`Month`).",
+          "required": false
+        },
+        {
+          "name": "y",
+          "type": "string | ((datum: T, index: number) => number | null)",
+          "default": null,
+          "description": "A single series: its field. Use `series` for several.",
+          "required": false
+        },
+        {
+          "name": "yLabel",
+          "type": "string",
+          "default": null,
+          "description": "The name of the single `y` series (legend, tooltip, table). Default: the field's name.",
+          "required": false
+        },
+        {
+          "name": "zero",
+          "type": "boolean",
+          "default": null,
+          "description": "Start the value axis at zero. Default: true for bars and areas; for lines, unless the values sit far from zero.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}