vue-charts Labels and Cell
<Label> draws one text at a position in the chart. <LabelList> draws one label per item of a series. <Cell> sets the color or other SVG attributes of one item in a series.
LabelList
Put a <LabelList> inside a series to label every bar, point or sector. Without data-key, each label shows the item's value.
<Bar data-key="value" fill="#f97316">
<LabelList position="top" :offset="12" />
</Bar>
Use data-key to show another field of the row, for example a name inside radial bars:
<LabelList> works as a child of Bar, Line, Funnel, Radar and RadialBar. Area and Pie take a label prop and a #label slot instead, and Scatter takes a label prop; see their chart pages.
LabelList props
| Prop | Type | Default | Description |
|---|---|---|---|
data-key | string | (row) => unknown | — | Field of the row to show. Without it, value-accessor picks the text |
value-accessor | (entry, index) => string | number | the item value (last value of a range) | Picks the text when there is no data-key |
position | LabelPosition | — | Where the label sits relative to each item: a name or { x, y }. See Positions |
formatter | (value: unknown) => string | number | undefined | — | Writes the label text. Receives the raw value, also null or an object |
offset | number | 5 | Distance from the item in px |
angle | number | — | Rotation in degrees |
text-break-all | boolean | false | Break long text at any character |
clock-wise | boolean | — | Direction of text on a radial path (insideStart, insideEnd, end) |
id | string | — | Base id. Each label gets ${id}-${index} |
data | Data[] | from the series | Items to label. The series fills this; set it only to label your own geometry |
Other attributes go to every label, for example fill, class or font-size. Without a formatter, only text and numbers make a label; other values, such as null or objects, show no label. With a formatter, its result decides: undefined shows no label.
LabelList slot
| Slot | Props | Description |
|---|---|---|
#content | { x, y, width, height, value, index, formatter, ... } | Replaces each label. Receives the item geometry (cartesian or polar), the value, the index and the other props. With a formatter, value is the raw value and the slot calls formatter itself |
<Bar data-key="value">
<LabelList>
<template #content="{ x, y, width, value }">
<text :x="x + width / 2" :y="y - 8" text-anchor="middle" class="fill-(--color-foreground) text-xs">
{{ value }}
</text>
</template>
</LabelList>
</Bar>
Label
A <Label> inside a chart is placed in the plot area. Inside a series or a PolarRadiusAxis it uses that element's box. Use it for a center value in a donut or gauge:
<Pie :data="data" data-key="value" :inner-radius="70">
<Label position="center" :value="total" class="fill-(--color-foreground) text-2xl font-semibold" />
</Pie>
Axes and reference elements create a Label for you through their label prop, for example <ReferenceLine :y="80" label="Target" /> or <XAxis label="Month" />.
Label props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | number | — | Text to show. Without value and without a #content slot, the label renders nothing |
position | LabelPosition | center | Where the label sits. See Positions |
offset | number | 5 | Distance from the reference edge in px |
formatter | (value) => string | number | undefined | — | Formats value before it is drawn |
view-box | { x, y, width, height } or { cx, cy, innerRadius, outerRadius, startAngle, endAngle } | plot area | Box to place the label in |
angle | number | — | Rotation in degrees |
text-break-all | boolean | false | Break long text at any character |
id | string | — | Id of the text element |
class | string | array | object | '' | Class on the text element |
Other attributes, such as fill or font-size, go to the SVG <text> ([data-slot="label"], class v-charts-label). In a LabelList, a label without its own fill takes the fill of its item.
Label slot
| Slot | Props | Description |
|---|---|---|
#content | Label props plus viewBox | Replaces the text. viewBox is normalized: missing sizes and angles are 0 |
Positions
For cartesian boxes (bars, the plot area):
| Position | Place |
|---|---|
top, bottom, left, right | Outside the box, next to that edge |
inside, center, middle | At the center of the box |
insideTop, insideBottom, insideLeft, insideRight | Inside the box, at that edge |
insideTopLeft, insideTopRight, insideBottomLeft, insideBottomRight | Inside the box, at that corner |
{ x, y } | At that point in the box. Numbers are px; strings such as '50%' are relative to the box |
For polar boxes (sectors, radial bars):
| Position | Place |
|---|---|
center, centerTop, centerBottom | At the center of the circle; centerTop and centerBottom put the text below or above the center point |
outside | Outside the sector, at its middle angle |
inside (default) | In the middle of the sector |
insideStart, insideEnd, end | Along the arc at the start or end of the sector. Use clock-wise to set the text direction |
Cell
<Cell> sets attributes for one item of a series. Put one Cell per row inside the series, in data order. The first Cell styles the first item, and so on.
<Bar data-key="uv">
<Cell v-for="(row, i) in data" :key="row.name" :fill="colors[i]" />
</Bar>
Cell works only in Bar, Pie and Funnel. Other series ignore it; use their #shape or #dot slots to style single items.
| Prop | Type | Description |
|---|---|---|
fill | string | Fill of the item. In Pie and Funnel, the legend, the tooltip swatch and the labels use this color too |
stroke | string | Stroke of the item |
| any SVG attribute | — | For example opacity, stroke-width or class. The series applies it to the item's shape |
Cell renders nothing itself. To style the active item, use the series' active props or slots.
Related
- Text: the SVG text component that labels use
- Shapes: draw your own items in
#shapeslots - Customize charts: more styling options
- Theming: text colors