@vx/marker

A Marker is a line with a piece of text attached to it. It's great for highlighting locations in your graph.

Example

marker example

<Marker
  from={markerFrom}
  to={markerTo}
  stroke={'white'}
  label={'deploy'}
  labelStroke={'none'}
  labelDx={6}
  labelDy={15}
/>

Installation

npm install --save @vx/marker

Components

APIs

#<Marker />

# Marker.classNamestringoptional

className to apply to line element.

# Marker.from{ x?: number; y?: number; }optional

x,y coordinates of the marker line start point. If a label is passed its origin is set to this position.

# Marker.labelReactNodeoptional

Label with origin at the specified from cordinates.

# Marker.labelAnchorstringoptional

textAnchor attribute applied to label text element.

Default left

# Marker.labelDxReactTextoptional

dx attribute applied to label text element.

Default 0

# Marker.labelDyReactTextoptional

dy attribute applied to label text element.

Default 0

# Marker.labelFillstringoptional

fill color applied to label text element.

# Marker.labelFontSizeReactTextoptional

fontSize attribute applied to label text element.

Default 10

# Marker.labelPaintOrderstringoptional

paintOrder attribute applied to label text element.

Default stroke

# Marker.labelStrokestringoptional

stroke color applied to label text element.

Default white

# Marker.labelStrokeWidthReactTextoptional

strokeWidth attribute applied to label text element.

Default 3

# Marker.leftnumberoptional

Left offset applied to container g element.

Default 0

# Marker.strokestringoptional

stroke color of the marker line.

Default magenta

# Marker.strokeDasharraystringoptional

strokeDasharray attribute of the marker line.

# Marker.strokeWidthnumberoptional

strokeWidth of the marker line.

Default 2

# Marker.to{ x?: number; y?: number; }optional

x,y coordinates of the marker line end point.

# Marker.topnumberoptional

Top offset applied to container g element.

Default 0

# Marker.transformstringoptional

transform attribute applied to the marker line.