Chart
ChartBar
Bar chart with stacking, orientation, radius, and padding control.
ChartBar
Lightweight wrapper around the Nuxt UI bar chart primitive. Supports stacked or grouped bars, vertical or horizontal orientation, and group/bar padding control. Requires a yAxis prop specifying which data keys to plot. Forwards unknown attributes to the underlying primitive via v-bind="$attrs".
Components
<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. |
AI Context
component: XAChartBar
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Rendering a standalone grouped or stacked bar chart; prefer XACardChartRevenue or XACardChartExpenses when the chart should appear inside a card
patterns:
- yAxis must list the data field names to plot as bars.
- Use xFormatter to convert numeric tick indexes to string labels (e.g. month names).