g6/packages/site/docs/manual/middle/elements/edges/arrow.en.md

title	order
Arrow	2

No matter built-in edges or custom edges, arrows can be assigned to the end or begin position of an edge. There are three kinds of arrows in G6: default arrow, built-in arrow, and custom arrow.

Default Arrow

Usage

Configure the endArrow or startArrow to true in the style of an edge:

style: {
  endArrow: true,
  startArrow: true
}

Built-in Arrow

Supported by v3.5.8 and later versions.

Overview

Name	Parameters	Usage	Result
triangle	The paramters are arrow's width (10 by default), length (15 by default), and offset (0 by default, corresponds to d), respectively.	endArrow: { path: G6.Arrow.triangle(10, 20, 25), d: 25 }
vee	The paramters are arrow's width (15 by default), length (20 by default), and offset (0 by default, corresponds to d), respectively.	endArrow: { path: G6.Arrow.vee(10, 20, 25), d: 25 }
circle	The paramters are arrow's radius (5 by default) and offset (0 by default, corresponds to d) respectively.	endArrow: { path: G6.Arrow.circle(10, 25), d: 25 }
diamond	The paramters are arrow's width (15 by default), length (15 by default), and offset (0 by default, corresponds to d), respectively.	endArrow: { path: G6.Arrow.diamond(10, 20, 25), d: 25 }
rect	The paramters are arrow's width (10 by default), length (10 by default), and offset (0 by default, corresponds to d), respectively.	endArrow: { path: G6.Arrow.rect(10, 20, 25), d: 25 }
triangleRect	The paramters are triangle's width (15 by default), triangle's length (20 by default), rect's width (15 by default), rect's length (3 by default), gap between the triangle and the rect (3 by default), and offset (0 by default, corresponds to d), respectively.	endArrow: { path: G6.Arrow.triangleRect(15, 15, 15, 3, 5, 25), d: 25 }

Usage

Call G6.Arrow.arrowName for the path in style's endArrow or startArrow:

style: {
  endArrow: {
    path: G6.Arrow.triangle(10, 20, 25), // Using the built-in edges for the path, parameters are the width, length, offset (0 by default, corresponds to d), respectively
    d: 25
  },
  startArrow: {
    path: G6.Arrow.vee(15, 20, 15), // Using the built-in edges for the path, parameters are the width, length, offset (0 by default, corresponds to d), respectively
    d: 15
  },
}

Custom Arrow

Please follow the Custom Arrow in the Advanced Doc.

Configure the Arrow Style

Only built-in edges and custom edges can be configured.

Configurations

Name	Required	Type	Description
fill	false	String	Filling color. No fill by default
stroke	false	String	The stroke color. Same as the edge by default
lineWidth	false	Number	The line width. Same as the edge by default
opacity	false	Number	Opacity
strokeOpacity	false	Number	The stroke opacity
shadowColor	false	String	The color of the shadow
shadowBlur	false	Number	The blur degree of the shadow
shadowOffsetX	false	Number	The x offset of the shadow
shadowOffsetY	false	Number	The y offset of the shadow
lineDash	false	Array	The style of the dash line. It is an array that describes the length of gaps and line segments. If the number of the elements in the array is odd, the elements will be dulplicated. Such as [5, 15, 25] will be regarded as [5, 15, 25, 5, 15, 25]

Usage

// Built-in Arrow
style: {
  endArrow: {
    path: G6.Arrow.triangle(10, 20, 25),
    d: 25,
    fill: '#f00',
    stroke: '#0f0',
    opacity: 0.5,
    lineWidth: 3,
    // ...
  },
}


// Custom Arrow
style: {
  endArrow: {
    path: 'M 0,0 L 20,10 L 20,-10 Z',
    d: 5,
    fill: '#f00',
    stroke: '#0f0',
    opacity: 0.5,
    lineWidth: 3,
    // ...
  },
}