Chart
ChartArea
Area chart with configurable curve, axes, legend, and grid lines.
ChartArea
Lightweight wrapper around the Nuxt UI area chart primitive. Shares the same prop surface as XAChartLine but renders filled area shapes beneath the line. Forwards unknown attributes to the underlying primitive via v-bind="$attrs".
Components
<XAChartArea />
Area chart with the same prop surface as XAChartLine, minus lineWidth.
<XAChartArea
:data="timeSeriesData"
:categories="{ signups: { name: 'Signups', color: '#6366f1' } }"
:height="200"
hide-legend
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | any[] | — | Required. Chart data array. |
categories | Record<string, { name: string; color: string }> | — | Required. Series definitions. |
height | number | 300 | Chart height in px. |
xFormatter | (tick: number, i?: number) => string | — | Custom X-axis tick formatter. |
yFormatter | (tick: number, i?: number) => string | — | Custom Y-axis tick formatter. |
curveType | CurveType | CurveType.MonotoneX | Curve interpolation. |
hideLegend | boolean | false | Hide the legend. |
hideTooltip | boolean | false | Hide the hover tooltip. |
legendPosition | LegendPosition | LegendPosition.TopRight | Legend placement. |
yGridLine | boolean | true | Show horizontal grid lines. |
xGridLine | boolean | false | Show vertical grid lines. |
hideXAxis | boolean | false | Hide the X axis. |
hideYAxis | boolean | false | Hide the Y axis. |
xLabel | string | — | X-axis label. |
yLabel | string | — | Y-axis label. |
AI Context
component: XAChartArea
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Rendering a standalone area/fill chart for time-series data; prefer XACardChart or XACardStatsSummary when the chart should appear inside a card container
patterns:
- categories is Record<key, { name, color }> where each key matches a data field.
- Use xFormatter/yFormatter to map numeric tick indexes to data labels.