DocumentationNuxt Charts v3
Category Distribution
A component to visualize categorical data
Use CategoryDistribution to display a value and its category shares. It requires Vue and Tailwind CSS and inherits Nuxt UI colors when available. Colors, values, and trend direction come from your data.
Example
Here's an example of the CategoryDistribution in action, monitoring a fictional marketing service.
100+8.2%
Marketing
Sales
Development
Support
<script setup lang="ts">
const exampleCategories = [
{ label: 'Marketing', percentage: 40, color: '#6366f1', value: 4000 },
{ label: 'Sales', percentage: 25, color: '#22d3ee', value: 2500 },
{ label: 'Development', percentage: 20, color: '#10b981', value: 2000 },
{ label: 'Support', percentage: 15, color: '#f59e42', value: 1500 },
]
const exampleTrend = {
value: '+8.2%',
direction: 'up' as const,
}
</script>
<template>
<div class="bg-elevated/50 w-full py-8">
<CategoryDistribution
:primary-value="100"
gap="lg"
:categories="exampleCategories"
:trend="exampleTrend"
legend-class="mt-4"
class="mx-auto w-full max-w-lg"
/>
</div>
</template>
nuxt-charts add CategoryDistribution
Props
| Prop | Type | Default | Description |
|---|---|---|---|
primaryValue | string | number | — | The main value to display |
gap | 'sm' | 'lg' | 'xl' | 'sm' | Spacing between segments. |
categories | CategoryItem[] | — | Array of category items |
trend | TrendIndicator | — | Optional trend indicator object |
legendClass | string | '' | Additional classes for the legend |
showFullLabel | boolean | true | Show full label instead of truncated |
title | string | undefined | Optional heading. |
showLegend | boolean | true | Show category labels. |
showTooltip | boolean | true | Show native segment tooltips. |
tooltipFormatter | (category) => string | Label and value or percentage | Custom tooltip text. |
Category items have label, percentage, color, and an optional value. Colors accept CSS variables, such as var(--ui-primary). Shares are normalized across the available bar width, with gaps accounted for.
Use the header slot to replace the value and trend; it receives value and trend. The legend slot receives category and index for each item.