{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"area-chart","title":"Area Chart","description":"Show how one or several measures change over time as filled areas, overlaid or stacked. Search terms: trend, time series, graph, analytics.","registryDependencies":["@siteplane/base","@siteplane/chart"],"files":[{"path":"packages/ui/src/components/area-chart/area-chart.tsx","content":"\"use client\";\n\nimport * as React from \"react\";\n\nimport { LineAreaChart } from \"../chart/chart-line-area\";\nimport type { CartesianChartProps, ChartCurve } from \"../chart/chart-types\";\n\nexport type AreaChartProps = CartesianChartProps & {\n  /**\n   * How the area joins its points. `monotone` (the default) bends through every\n   * point and never swings past the data, so an area that rests on 0 stays on\n   * it; `smooth` is a natural spline, which bends evenly and can swing a little\n   * past the data between two points; `linear` is straight segments and `step`\n   * holds each value until the middle between two points.\n   */\n  curve?: ChartCurve;\n  /** Stacks the areas on each other: positive values up from 0, negative ones down. */\n  stacked?: boolean;\n  /** A gradient from the series colour to nothing, or a flat tint of it. */\n  fill?: \"gradient\" | \"solid\";\n};\n\n/**\n * One or several areas over categories or dates, with a line along the top of\n * each, a crosshair, a tooltip and arrow-key navigation. The chart core draws\n * it; new data glides in.\n */\nexport function AreaChart(props: AreaChartProps): React.ReactElement {\n  return <LineAreaChart {...props} mode=\"area\" />;\n}\n","type":"registry:ui","target":"~/src/siteplane/components/area-chart/area-chart.tsx"},{"path":"packages/ui/src/components/area-chart/index.ts","content":"export * from \"./area-chart\";\n","type":"registry:ui","target":"~/src/siteplane/components/area-chart/index.ts"}],"type":"registry:ui","docs":"https://ui.siteplane.io/docs-markdown/components/area-chart.md","categories":["Charts"],"meta":{"avoidWhen":["Avoid when the categories have no order, such as countries; use a Bar Chart.","Avoid overlapping several areas that hide each other; stack them, or use a Line Chart.","Avoid for readers who must read exact values: the axis gives a rough scale and the tooltip one value at a time; use a Table."],"description":"Show how one or several measures change over time as filled areas, overlaid or stacked.","knownLimitations":["The plot is one focus stop; arrow keys, Home and End step through the x positions. There are no click or selection props, and the legend does not toggle series: a mouse over an entry only steps the other series back.","A missing value (null, undefined or not a number) breaks the area at that point and leaves the series out of the tooltip for it; a point on its own is drawn as a dot.","Stacked areas show each series' own value in the tooltip, not the running sum, and a missing value adds nothing to the stack.","The value axis always includes 0 and has no props of its own for its range.","Dates must be Date objects; they are written in UTC, so use dates at midnight UTC (new Date('2026-01-05')) for days. Text x values are categories, shown in the order given.","A date axis is labeled on calendar ticks (days, weeks or months, as many as fit), evenly spaced, which need not sit on a data point; a text axis shows every k-th label, one k for the whole axis, so a narrow chart shows fewer of them. Neither lets two labels overlap.","When the data changes the areas morph and the axis moves with them, unless a series has a gap or only one point, or the number of series changes, which show at once. Axis labels that the new data brings or takes away fade through: the old ones are out before the new ones come in.","Several series share one value axis; a second axis is not provided.","A series that sets no color takes a shade of the brand color, from strong to light and spread over the number of series (palette brand, the default); palette categorical gives each the chart colors --chart-1 to --chart-8 in order instead. A color that a series sets always wins, and both palettes start over from the ninth series.","height=\"fill\" makes the chart as tall as its box, which takes its height from its container (a flex item that grows, a grid cell, or a box with a height) and never from the chart; minHeight sets the least height, 240 px by default. Until the box is measured, on the server too, the chart is minHeight tall."],"providerNotes":["The tooltip comes from the installed Tooltip. The chart opens and closes it itself, so it needs no TooltipProvider.","The glide uses the installed Motion component and its tokens. SiteplaneMotionProvider preset=\"reduced\" and the system setting show new data at once."],"releaseStatus":"stable","searchTerms":["area-chart","area","chart","stacked","trend","time series","graph","analytics"],"useWhen":["Use when one or several measures should be shown over time or an ordered set and the size of the whole, or of its parts when stacked, matters."]}}