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>
Position the legend
Use the position prop to place the legend relative to the chart. When set, it overrides align and verticalAlign.
Inside positions (insideTop, insideBottomRight, center, …) float over the plot area — the chart keeps its full size:
<Legend position="insideTopRight" />
Outside positions (top, bottom, left, right) sit beyond the axes, and the plot area shrinks to make room. Use offset to control the gap:
<Legend position="top" :offset="10" />
When layout is left at its default ('auto'), it resolves to vertical for left/right positions and horizontal otherwise.
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 |
|---|---|---|---|
position | 'top' | 'bottom' | 'left' | 'right' | 'center' | 'inside*' | { x, y } | — | Legend position; overrides align and verticalAlign |
offset | number | 0 | Gap along the position direction |
layout | 'horizontal' | 'vertical' | 'auto' | 'auto' | Layout direction; 'auto' resolves from position |
align | 'left' | 'center' | 'right' | 'center' | Horizontal alignment (legacy, use position instead) |
verticalAlign | 'top' | 'middle' | 'bottom' | 'bottom' | Vertical alignment (legacy, use position instead) |
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. |