The CategoryDistribution component is a clean component to displaying categorical data.
Here's an example of the CategoryDistribution in action, monitoring a fictional marketing service.
<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">
<LibCategoryDistribution
:primary-value="100"
:categories="exampleCategories"
:trend="exampleTrend"
legend-class="mt-4"
class="mx-auto max-w-lg"
/>
</div>
</template>
nuxt-charts add CategoryDistribution
| Prop | Type | Default | Description |
|---|---|---|---|
primaryValue | string | number | — | The main value to display |
gap | string | number | 0 | The gap between the items |
categories | CategoryItem[] | — | Array of category items |
trend | TrendIndicator | — | Optional trend indicator object |
legendClass | string | '' | Additional classes for the legend |
showFullLabel | boolean | false | Show full label instead of truncated |