Components
Reference Elements
Annotate charts with reference dots, lines, and areas
<ReferenceDot>, <ReferenceLine>, and <ReferenceArea> add visual annotations to cartesian charts — highlighting thresholds, targets, or regions of interest.
ReferenceDot
Mark a specific data point:
Custom shape slot
Use the #shape slot to render a custom shape instead of the default dot:
ReferenceLine
Draw a horizontal or vertical reference line:
Vertical line
<ReferenceLine x="Mar" stroke="#14b8a6" />
ReferenceArea
Highlight a region between two coordinates:
Overflow behavior
Control what happens when a reference element falls outside the chart domain using if-overflow:
| Value | Behavior |
|---|---|
'discard' | Hide when outside domain (default) |
'hidden' | Render but clip to chart area |
'visible' | Render even outside chart area |
'extendDomain' | Extend axis domain to include the element |
<ReferenceDot x="Mar" :y="9999" if-overflow="extendDomain" />
ReferenceDot props
| Prop | Type | Default | Description |
|---|---|---|---|
x | number | string | — | X-axis coordinate |
y | number | string | — | Y-axis coordinate |
r | number | 10 | Dot radius |
fill | string | '#fff' | Dot fill color |
stroke | string | '#ccc' | Dot stroke color |
label | string | number | object | — | Label text or Label props |
ifOverflow | string | 'discard' | Overflow behavior |
xAxisId | number | string | 0 | Target X axis ID |
yAxisId | number | string | 0 | Target Y axis ID |
ReferenceDot slots
| Slot | Props | Description |
|---|---|---|
#shape | { cx, cy, r, fill, stroke, clipPath } | Custom shape rendering |
ReferenceLine props
| Prop | Type | Default | Description |
|---|---|---|---|
x | number | string | — | X value for vertical line |
y | number | string | — | Y value for horizontal line |
stroke | string | '#ccc' | Line stroke color |
strokeWidth | number | string | 1 | Line stroke width |
label | string | number | object | — | Label text or Label props |
ifOverflow | string | 'discard' | Overflow behavior |
xAxisId | number | string | 0 | Target X axis ID |
yAxisId | number | string | 0 | Target Y axis ID |
ReferenceArea props
| Prop | Type | Default | Description |
|---|---|---|---|
x1 | number | string | — | Start X coordinate |
x2 | number | string | — | End X coordinate |
y1 | number | string | — | Start Y coordinate |
y2 | number | string | — | End Y coordinate |
fill | string | '#ccc' | Area fill color |
fillOpacity | number | 0.5 | Fill opacity |
stroke | string | 'none' | Border stroke color |
radius | number | number[] | 0 | Corner radius |
label | string | number | object | — | Label text or Label props |
ifOverflow | string | 'discard' | Overflow behavior |
xAxisId | number | string | 0 | Target X axis ID |
yAxisId | number | string | 0 | Target Y axis ID |