Chart
ChartCategoryDistribution
Horizontal bar breakdown of categories with percentages and an optional trend badge.
ChartCategoryDistribution
Horizontal distribution bar showing how a total is split across categories, with a percentage legend below. Useful for lead sources, traffic channels, or budget allocation breakdowns.
Components
<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
component: XAChartCategoryDistribution
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Showing how a total is distributed across categories as a segmented horizontal bar — lead sources, traffic channels, budget allocation, etc.
patterns:
- Each category must include a percentage (0–100) that sums to 100 across all entries.
- The optional trend prop accepts { value: string, direction: "up" | "down" }.