nuxt-x-app

Chart

Thin, prop-normalized wrappers around the Nuxt UI chart primitives — line, area, bar, donut, bubble, Gantt, progress circle, status tracker, and category distribution.

Chart

Chart components are lightweight wrappers that normalize prop names and set sensible defaults on top of the underlying Nuxt UI chart library. All chart components forward unknown attributes to the underlying primitive via v-bind="$attrs".

The categories prop shared by most charts is a Record<string, { name: string; color: string }> where each key matches a data field name.

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.

`<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.

`<XAChartBar />`

Bar chart with stacking, vertical/horizontal orientation, and group/bar padding control. Requires yAxis (the data keys to plot).

<XAChartBar
  :data="[
    { month: 'Jan', desktop: 186, mobile: 80 },
    { month: 'Feb', desktop: 305, mobile: 200 },
  ]"
  :categories="{
    desktop: { name: 'Desktop', color: '#3b82f6' },
    mobile: { name: 'Mobile', color: '#10b981' },
  }"
  :y-axis="['desktop', 'mobile']"
  :x-formatter="(i) => data[i].month"
  stacked
/>

Props

Prop	Type	Default	Description
`data`	`any[]`	—	Required. Chart data array.
`categories`	`Record<string, { name: string; color: string }>`	—	Required. Series definitions.
`yAxis`	`string[]`	—	Required. Data keys to render as bars.
`height`	`number`	`300`	Chart height in px.
`stacked`	`boolean`	`false`	Stack bars.
`orientation`	`Orientation`	`Orientation.Vertical`	Bar direction.
`xFormatter`	`(tick: number, i?: number) => string`	—	Custom X-axis tick formatter.
`yFormatter`	`(tick: number, i?: number) => string`	—	Custom Y-axis tick formatter.
`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.
`radius`	`number`	`4`	Bar corner radius.
`barPadding`	`number`	`0.2`	Inner padding within a group.
`groupPadding`	`number`	`0`	Outer padding between groups.

`<XAChartDonut />`

Donut or pie chart. Exposes a default slot rendered in the center of the donut.

<XAChartDonut
  :data="[45, 30, 25]"
  :categories="{
    0: { name: 'North America', color: '#3b82f6' },
    1: { name: 'Europe', color: '#10b981' },
    2: { name: 'Asia', color: '#f59e0b' },
  }"
  :height="300"
  :arc-width="20"
>
  <span class="text-sm font-semibold">$248K</span>
</XAChartDonut>

Props

Prop	Type	Default	Description
`data`	`number[]`	—	Required. Array of segment values.
`categories`	`Record<string, { name: string; color: string }>`	—	Required. Segment labels and colors (keyed by data index or field).
`height`	`number`	`300`	Chart height in px.
`radius`	`number`	`100`	Donut outer radius in px.
`arcWidth`	`number`	`16`	Arc stroke width in px.
`padAngle`	`number`	`0.02`	Gap between segments in radians.
`hideLegend`	`boolean`	`false`	Hide the legend.
`legendPosition`	`LegendPosition`	`LegendPosition.BottomCenter`	Legend placement.
`type`	`DonutType`	`DonutType.Full`	Full donut or half-donut.

`<XAChartBubble />`

Bubble (scatter) chart where circle size encodes a third variable. X, Y, and size are resolved via accessor functions.

<XAChartBubble
  :data="campaignData"
  :categories="{ campaign: { name: 'Campaign', color: '#6366f1' } }"
  category-key="type"
  :x-accessor="(d) => d.reach"
  :y-accessor="(d) => d.conversions"
  :size-accessor="(d) => d.budget"
  x-label="Reach"
  y-label="Conversions"
  :size-range="[5, 30]"
/>

Props

Prop	Type	Default	Description
`data`	`any[]`	—	Required. Chart data array.
`categories`	`Record<string, { name: string; color: string }>`	—	Required. Series definitions.
`categoryKey`	`string`	—	Required. Data field used to map points to a category.
`height`	`number`	`300`	Chart height in px.
`xAccessor`	`(d: any) => number`	—	Extracts the X value from a data point.
`yAccessor`	`(d: any) => number`	—	Extracts the Y value from a data point.
`sizeAccessor`	`(d: any) => number`	—	Extracts the bubble size value from a data point.
`xLabel`	`string`	—	X-axis label.
`yLabel`	`string`	—	Y-axis label.
`xFormatter`	`(tick: number, i?: number) => string`	—	Custom X-axis tick formatter.
`yFormatter`	`(tick: number, i?: number) => string`	—	Custom Y-axis tick formatter.
`legendPosition`	`LegendPosition`	`LegendPosition.BottomRight`	Legend placement.
`hideLegend`	`boolean`	`false`	Hide the legend.
`hideTooltip`	`boolean`	`false`	Hide the hover tooltip.
`sizeRange`	`[number, number]`	`[5, 25]`	Min and max bubble radius in px.
`opacity`	`number`	—	Bubble fill opacity.
`xNumTicks`	`number`	—	X-axis tick count.
`yNumTicks`	`number`	—	Y-axis tick count.
`xGridLine`	`boolean`	`false`	Show vertical grid lines.
`yGridLine`	`boolean`	`true`	Show horizontal grid lines.
`hideXAxis`	`boolean`	`false`	Hide the X axis.
`hideYAxis`	`boolean`	`false`	Hide the Y axis.
`xDomainLine`	`boolean`	`false`	Show the X domain line.
`yDomainLine`	`boolean`	`false`	Show the Y domain line.

`<XAChartGantt />`

Gantt chart for project/task timelines. Row labels, start positions, and durations are resolved via accessor functions.

<XAChartGantt
  :data="tasksData"
  :categories="{
    design: { name: 'Design', color: '#6366f1' },
    development: { name: 'Development', color: '#3b82f6' },
  }"
  :x-accessor="(d) => d.startWeek"
  :length-accessor="(d) => d.durationWeeks"
  :type-accessor="(d) => d.phase"
  show-labels
  :label-width="120"
/>

Props

Prop	Type	Default	Description
`data`	`any[]`	—	Required. Chart data array.
`categories`	`Record<string, { name: string; color: string }>`	—	Required. Phase/category definitions.
`height`	`number`	`300`	Chart height in px.
`xAccessor`	`(d: any) => number`	—	Extracts the X start position.
`lengthAccessor`	`(d: any) => number`	—	Extracts the bar duration/length.
`typeAccessor`	`(d: any) => string`	—	Maps a row to a category key.
`showLabels`	`boolean`	`true`	Show row label column.
`labelWidth`	`number`	`100`	Width of the label column in px.
`hideLegend`	`boolean`	`false`	Hide the legend.
`legendPosition`	`LegendPosition`	`LegendPosition.BottomCenter`	Legend placement.

`<XAChartProgressCircle />`

SVG circular progress ring. Often used inside <XACardProgressCircle>.

<XAChartProgressCircle
  :value="73"
  :size="80"
  :stroke-width="6"
  show-label
/>

Props

Prop	Type	Default	Description
`value`	`number`	`0`	Fill percentage (0–100).
`size`	`number`	`60`	SVG diameter in px.
`strokeWidth`	`number`	`6`	Stroke width of the ring.
`showLabel`	`boolean`	`false`	Render the percentage value in the center.

`<XAChartStatusTracker />`

Uptime-style bar chart that maps a statusData array to colored bar segments. Designed for service health dashboards.

<XAChartStatusTracker
  :status-data="uptimeData"
  :operational-status="true"
  domain="api.example.com"
  uptime="99.98%"
  :bar-width="4"
  :bar-gap="1"
/>

Props

Prop	Type	Default	Description
`statusData`	`Array<{ status: string }>`	`[]`	Array of status entries (each with a `status` string).
`operationalStatus`	`boolean`	`true`	Whether the service is currently operational.
`barWidth`	`number`	`4`	Width of each bar segment in px.
`barGap`	`number`	`1`	Gap between bar segments in px.
`domain`	`string`	`''`	Service domain/name displayed in the header.
`uptime`	`string`	`''`	Uptime percentage string displayed in the header.

`<XAChartCategoryDistribution />`

Horizontal distribution bar showing how a total is split across categories, with a percentage legend.

<XAChartCategoryDistribution
  primary-value="1,240 leads"
  :categories="[
    { label: 'Organic', percentage: 42, color: '#3b82f6', value: 521 },
    { label: 'Paid', percentage: 35, color: '#6366f1', value: 434 },
    { label: 'Referral', percentage: 23, color: '#10b981', value: 285 },
  ]"
  :trend="{ value: '+8.3%', direction: 'up' }"
/>

Props

Prop	Type	Default	Description
`primaryValue`	`string \| number`	`''`	Primary summary value displayed above the bar.
`gap`	`string \| number`	`0`	Gap between bar segments.
`categories`	`Array<{ label: string; percentage: number; color: string; value?: number }>`	`[]`	Category definitions.
`trend`	`{ value: string; direction: 'up' \| 'down' }`	—	Optional trend badge.
`legendClass`	`string`	`''`	Extra CSS classes applied to the legend.
`showFullLabel`	`boolean`	`false`	Show full label text (no truncation).

AI Context

category: Chart
package: "@xenterprises/nuxt-x-app"
components:
  - XAChartLine
  - XAChartArea
  - XAChartBar
  - XAChartDonut
  - XAChartBubble
  - XAChartGantt
  - XAChartProgressCircle
  - XAChartStatusTracker
  - XAChartCategoryDistribution
use-when: >
  Rendering standalone data visualizations. Prefer the XACard chart
  variants (XACardRevenue, XACardSparkline, etc.) when the chart should
  appear inside a card container with a title and summary value.
  Use these primitives directly in custom layouts.
patterns:
  - All time-series charts expect `categories` as a Record<key, { name, color }>.
  - Use xFormatter/yFormatter to map numeric tick indexes to data labels.
  - XAChartProgressCircle is used standalone or inside XACardProgressCircle.
  - XAChartBubble requires accessor functions; values are not derived from category keys.

Edit this pageorReport an issue

Card

A comprehensive set of card components for dashboards — stats, KPIs, progress, quotas, revenue, and chart containers.

nuxt-x-app