Area
An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph.
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
Sparkline
We can turn the chart into sparkline chart by hiding axis, gridline and legends.
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>