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>
Legend props
| Prop | Type | Default | Description |
|---|---|---|---|
layout | 'horizontal' | 'vertical' | 'horizontal' | Layout direction |
align | 'left' | 'center' | 'right' | 'center' | Horizontal alignment |
verticalAlign | 'top' | 'middle' | 'bottom' | 'bottom' | Vertical alignment |
width | number | — | Fixed width |
height | number | — | Fixed height |
iconSize | number | 14 | Size of the legend icon |
iconType | string | — | Legend icon shape ('line', 'plainline', 'square', 'rect', 'circle', 'cross', 'diamond', 'star', 'triangle', 'wye') |
wrapperStyle | CSSProperties | — | Inline styles for the legend wrapper |
contentStyle | CSSProperties | — | Inline styles for the content |
itemStyle | CSSProperties | — | Inline styles for each legend item |
formatter | (value: string, entry: LegendPayload) => string | — | Format legend label text |
onClick | (data: LegendPayload, index: number) => void | — | Click handler |
onMouseEnter | (data: LegendPayload, index: number) => void | — | Mouse enter handler |
onMouseLeave | (data: LegendPayload, index: number) => void | — | Mouse leave handler |
payloadUniqBy | boolean | Function | — | Deduplicate legend entries |
itemSorter | 'value' | 'dataKey' | Function | 'value' | Sort legend entries |
Legend slots
| Slot | Props | Description |
|---|---|---|
#content | { payload, layout, align, verticalAlign, ...props } | Custom legend content. payload is an array of { value, color, type, dataKey } entries. |