vue-charts Shapes
The shape components are the SVG pieces that the series draw: a bar is a Rectangle, a pie slice is a Sector, a line is a Curve. Use them in #shape, #activeBar, #dot or #content slots to change one detail of an item and keep the rest of the geometry.
Every shape takes its geometry as props and passes other attributes (fill, stroke, class, opacity, events) to the SVG element. A shape with missing or invalid geometry renders nothing.
Use a shape in a slot
The #shape slot of Bar gets the geometry of each bar. Pass it on to a Rectangle with rounded top corners; #activeBar draws the hovered bar.
Rectangle
A rectangle with optional rounded corners. Bar, ReferenceArea and the Tooltip cursor of a bar chart draw it.
| Prop | Type | Default | Description |
|---|---|---|---|
x, y | number | 0 | Top left corner |
width, height | number | 0 | Size. Negative values grow to the left or up |
radius | number | [tl, tr, br, bl] | — | Corner radius, one value or one per corner. Capped at half the smaller side |
<Bar data-key="value">
<template #shape="{ x, y, width, height, fill }">
<Rectangle :x="x" :y="y" :width="width" :height="height" :radius="[6, 6, 0, 0]" :fill="fill" />
</template>
</Bar>
Dot
A circle. Line, Area and Radar draw their dots with it, and ReferenceDot draws its marker.
| Prop | Type | Description |
|---|---|---|
cx, cy | number | Center |
r | number | Radius |
<Line data-key="value">
<template #dot="{ cx, cy, value }">
<Dot :cx="cx" :cy="cy" :r="value > 250 ? 6 : 3" fill="#f97316" />
</template>
</Line>
Sector
A ring segment. Pie, RadialBar and SunburstChart draw their slices with it.
| Prop | Type | Default | Description |
|---|---|---|---|
cx, cy | number | 0 | Center |
inner-radius, outer-radius | number | 0 | Radii in px. 0 inner radius draws a pie slice |
start-angle, end-angle | number | 0 | Angles in degrees. 0 points right; angles grow counterclockwise |
corner-radius | number | string | 0 | Rounds the corners |
force-corner-radius | boolean | false | Keep the corner radius on very thin sectors |
corner-is-external | boolean | false | Round the corners outwards |
<Pie :data="data" data-key="value">
<template #activeShape="sector">
<Sector v-bind="sector" :outer-radius="sector.outerRadius + 8" />
</template>
</Pie>
Curve
A line or area path through points. Line, Area and the line of a Scatter draw their path with it.
| Prop | Type | Description |
|---|---|---|
points | { x, y }[] | Points of the path. A point with x or y set to null is a gap |
type | CurveType | CurveFactory | Interpolation: 'linear', 'monotone', 'step', 'basis', 'natural' and the other d3 curves, or your own d3 curve factory |
base-line | number | { x, y }[] | Draw an area down to this value or path instead of a line |
layout | 'horizontal' | 'vertical' | Direction of the area base line |
connect-nulls | boolean | Join the path across gaps |
path | string | A ready SVG path; skips the calculation |
<Line data-key="value">
<template #shape="curve">
<Curve v-bind="curve" stroke-dasharray="4 4" />
</template>
</Line>
Symbols
A marker symbol. Scatter and the Legend icons draw it.
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'circle' | Symbol |
cx, cy | number | — | Center |
size | number | 64 | Size of the symbol |
size-type | 'area' | 'diameter' | 'area' | Read size as an area in px² or as a diameter in px |
<Scatter :data="data">
<template #shape="{ cx, cy, isActive }">
<Symbols type="diamond" :cx="cx" :cy="cy" :size="isActive ? 160 : 80" fill="#14b8a6" />
</template>
</Scatter>
Trapezoid
A trapezoid with a horizontal top and bottom. Funnel draws its stages with it.
| Prop | Type | Default | Description |
|---|---|---|---|
x, y | number | 0 | Top left corner |
upper-width | number | 0 | Width of the top edge |
lower-width | number | 0 | Width of the bottom edge, centered under the top edge |
height | number | 0 | Height |
<Funnel :data="data" data-key="value">
<template #shape="stage">
<Trapezoid v-bind="stage" stroke="#fff" :stroke-width="2" />
</template>
</Funnel>
Cross
Two lines that cross: a horizontal line at y and a vertical line at x. The Tooltip cursor of a scatter chart draws it.
| Prop | Type | Default | Description |
|---|---|---|---|
x, y | number | 0 | Position of the vertical and the horizontal line |
top, left | number | 0 | Start of the vertical and the horizontal line |
width, height | number | 0 | Length of the horizontal and the vertical line |
Polygon
A closed path through points. It builds the same path as the polygon rings of PolarGrid; use it to draw your own Radar area.
| Prop | Type | Description |
|---|---|---|
points | { x, y }[] | Corners in order. If one corner is not a number, nothing renders |
<Radar data-key="score">
<template #shape="{ points, fill }">
<Polygon :points="points" :fill="fill" fill-opacity="0.3" stroke="#f97316" />
</template>
</Radar>
Cursors
The #cursor slot of <Tooltip> receives the props of the default cursor shape: Rectangle for bar charts, Curve for line and area charts, Cross for scatter charts and Sector for radial charts. See Tooltip.
Related
- Customize charts: colors, slots and SVG attributes
- Rounded bar corners: the
radiusprop onBar - Labels and Cell: text and per-item attributes