NbPieChart shows the relative size of a small set of categories that sum to a meaningful whole. For more than ~6 segments, prefer NbBarChart, pies become hard to read with too many slices.
vue
<template>
<NbPieChart title="Traffic source" :data="data" />
</template>
<script setup lang="ts">
const data = [
{ label: 'Organic', value: 48 },
{ label: 'Referral', value: 22 },
{ label: 'Paid', value: 18 },
{ label: 'Direct', value: 12 },
]
</script>Donut mode
Set inner-radius to a value between 0 and 1 to render a donut. The slice labels move into the ring instead of being centred.
vue
<template>
<NbPieChart :data="data" :inner-radius="0.55" />
</template>Label modes
Choose between percentage (default), absolute value, or no labels.
Custom colors per slice
Supply a color on individual data items to override the palette per slice, useful for status palettes.
vue
<template>
<NbPieChart :data="data" />
</template>
<script setup lang="ts">
const data = [
{ label: 'Passing', value: 142, color: 'var(--nb-c-success)' },
{ label: 'Warning', value: 23, color: 'var(--nb-c-warning)' },
{ label: 'Failing', value: 6, color: 'var(--nb-c-danger)' },
]
</script>