Components
Legend
Add legends to identify chart series
The <Legend> component displays a legend identifying chart series by color and label.
Add a legend
<BarChart :width="500" :height="300" :data="data">
<Bar data-key="desktop" fill="#8884d8" />
<Bar data-key="mobile" fill="#82ca9d" />
<Legend />
</BarChart>
Customize legend content
Use the #content slot:
<Legend>
<template #content="legendProps">
<div class="flex gap-4 justify-center">
<span v-for="entry in legendProps.payload" :key="entry.value" class="flex items-center gap-1">
<span class="w-3 h-3 rounded-full" :style="{ backgroundColor: entry.color }" />
{{ entry.value }}
</span>
</div>
</template>
</Legend>