Chart
ChartLine
Line chart with configurable curve, axes, legend, and grid lines.
ChartLine
Lightweight wrapper around the Nuxt UI line chart primitive, normalizing prop names and setting sensible defaults. Renders multiple series via a categories map. Forwards unknown attributes to the underlying primitive via v-bind="$attrs".
Components
<XAChartLine />
Line chart with monotone curve, Y grid lines, and top-right legend by default.
<XAChartLine
:data="[
{ date: 'Jan', revenue: 4200, expenses: 3100 },
{ date: 'Feb', revenue: 5800, expenses: 3400 },
]"
:categories="{
revenue: { name: 'Revenue', color: '#3b82f6' },
expenses: { name: 'Expenses', color: '#ef4444' },
}"
:height="300"
:line-width="2"
/>
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 | Line 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. |
lineWidth | number | 2 | Line stroke width in px. |
AI Context
component: XAChartLine
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Rendering a standalone time-series or trend line chart; prefer XACardRevenue or XACardSparkline when the chart should appear inside a card with a title and metric value
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.