Donut
A donut chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories.
Source code
Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
npx ui-thing@latest add chart
Usage
Basic
Pie Chart
If you want to render pie chart instead, pass type as pie.
Color
We generate colors automatically based on the primary and secondary color and assigned them accordingly. Feel free to pass in your own array of colors.
Custom Tooltip
If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition here.
Custom Tooltip Component
This is what the CustomChartTooltip component looks like:
<template>
<UiCard class="text-sm">
<UiCardContent class="flex min-w-[180px] flex-col gap-2 p-3">
<div v-for="(item, key) in data" :key="key" class="flex items-center justify-between">
<div class="flex items-center">
<span class="mr-4 h-7 w-1 rounded-full" :style="{ background: item.color }" />
<span>{{ item.name }}</span>
</div>
<span class="ml-4 font-semibold">{{ item.value }}</span>
</div>
</UiCardContent>
</UiCard>
</template>
<script setup lang="ts">
defineProps<{
title?: string;
data: {
name: string;
color: string;
value: any;
}[];
}>();
</script>