:root {
--vis-tooltip-padding: 0 !important;
}
This gives you full control over tooltip customization.
You can provide a custom tooltip by using the tooltip slot:
<AreaChart>
<template #tooltip="{ values }">
<CustomTooltip :values="values" />
</template>
</AreaChart>
<script setup lang="ts">
const data = [
{ month: 'Jan', value: 75 },
{ month: 'Feb', value: 120 },
{ month: 'Mar', value: 180 },
{ month: 'Apr', value: 110 },
{ month: 'May', value: 90 },
{ month: 'Jun', value: 130 },
]
const categories = {
value: {
name: 'Desktop',
color: '#3b82f6',
},
}
const xFormatter = (i: number) => data[i].month
</script>
<template>
<AreaChart
:data="data"
:categories="categories"
:height="260"
:xFormatter="xFormatter"
xLabel="Month"
yLabel="Value"
>
<template #tooltip="{ values }">
<CustomTooltip :values="values" />
</template>
</AreaChart>
</template>
Here’s a simple custom tooltip component you can use:
<script lang="ts" setup>
interface AreaChartItem {
month: string
desktop: number
}
const categories: Record<string, BulletLegendItemInterface> = {
desktop: { name: 'Desktop', color: '#3b82f6' },
}
const AreaChartData: AreaChartItem[] = [
{ month: 'January', desktop: 186 },
{ month: 'February', desktop: 305 },
{ month: 'March', desktop: 237 },
{ month: 'April', desktop: 73 },
{ month: 'May', desktop: 209 },
{ month: 'June', desktop: 214 },
]
const xFormatter = (tick: number, _i?: number, _ticks?: number[]): string => {
if (typeof tick === 'number' && AreaChartData[tick]?.month) {
return AreaChartData[tick].month
}
return String(tick)
}
const formatCurrency = (value: number) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 0,
maximumFractionDigits: 0,
}).format(value)
}
function getFullMonthName(month: string): string {
return month || ''
}
</script>
<template>
<AreaChart
class="w-full"
:data="AreaChartData"
:height="320"
y-label="Value"
x-label="Month"
:categories="categories"
:y-num-ticks="4"
:x-num-ticks="7"
:y-grid-line="true"
:legend-position="LegendPosition.Top"
:hide-legend="false"
:x-formatter="xFormatter"
>
<template #tooltip="{ values }">
<div
class="bg-default flex max-w-64 items-start justify-start gap-2 rounded-xl border p-2"
>
<LibProgressCircle :value="75" :size="75" :stroke-width="2" />
<div>
<div class="text-default text-normal">
{{ getFullMonthName(values?.month ?? '') }}
</div>
<p class="text-sm">
In this month your spent
{{ formatCurrency(values?.desktop ?? 0) }} in total.
</p>
<a href="/" class="text-primary text-sm">Learn more</a>
</div>
</div>
</template>
</AreaChart>
</template>
Use this component in your chart’s tooltip slot as shown above.