Skip to main content

Filled shapes

Rectangle​

(x1,y1)(x2,y2)

Props​

Mandatory​

  • x1: first corner horizontal coordinate
    type: ScalarValue
  • y1: first corner vertical coordinate
    type: ScalarValue
  • x2: second corner horizontal coordinate
    type: ScalarValue
  • y2: second corner vertical coordinate
    type: ScalarValue

Optional​

  • color: fill color
    type: string
    default: "black"

all <rect> svg props are supported. For more information visit the documentation

Circle​

(x,y)r

Props​

Mandatory​

Optional​

  • color: fill color
    type: string
    default: "black"

all <circle> svg props are supported. For more information visit the documentation

Ellipse​

(x,y)rxry

Props​

Mandatory​

Optional​

  • color: fill color
    type: string
    default: "black"

all <ellipse> svg props are supported for more information visit the documentation

DirectedEllipse​

(x1,y1)(x2,y2)width

Props​

Mandatory​

Optional​

  • color: fill color
    type: string
    default: "black"

all <ellipse> svg props are supported. For more information visit the documentation

Polygon​

P1P2P3P4P5

Props​

Mandatory​

  • points: series of points
    type: Array<{ x: ScalarValue, y: ScalarValue }>

Optional​

  • color: fill color
    type: string
    default: "black"

all <polygon> svg props are supported. For more information visit the documentation

Shape​

Props​

Mandatory​

  • x: horizontal coordinate
    type: ScalarValue
  • y: vertical coordinate
    type: ScalarValue
  • size: shape size
    type: number
  • shape: shape name
    type: 'triangle' | 'circle' | 'diamond' | 'square'

Optional​

  • color: fill color
    type: string
    default: "black"
  • style: customises shape styling
    type: CSSProperties
    default: {}
  • onMouseEnter: mouse enter event callback
    type: MouseEventHandler<SVGGElement>
  • onMouseLeave: mouse leave event callback
    type: MouseEventHandler<SVGGElement>