HTMLGraph | Arrows Customization

Arrows Customization

Arrow shape can be customized by setting arrowRenderer edge shape parameter, for example:

    
const element = document.getElementById(&#39;canvas&#39;);

const canvas = new CanvasBuilder(element)
  .setDefaults({
    edges: {
      shape: {
        arrowRenderer: {
          type: &#34;triangle&#34;,
          radius: 7,
        }
      }
    }
  })
  .build();

The following arrow types are available:

Type	Preview	Optional Parameters
`"wedge"`		`radius`, `smallRadius`, `angle` (in radians)
`"triangle"`		`radius`
`"arc"`		`radius`

Also custom renderer function can be specified such as:

    
const arrowRenderer = (renderingParams) =&gt; {
  const { arrowLength, direction, shift } = renderingParams;

  const arrowPoints = [
    { x: 4, y: 0 },
    { x: arrowLength, y: 10 },
    { x: arrowLength, y: -10 },
  ];

  const points = arrowPoints.map((point) =&gt; ({
    x: direction.x * point.x - direction.y * point.y + shift.x,
    y: direction.y * point.x + direction.x * point.y + shift.y,
  }));

  const move = `M ${points[0].x} ${points[0].y}`;
  const line1 = `L ${points[1].x} ${points[1].y}`;
  const line2 = `L ${points[2].x} ${points[2].y}`;

  return `${move} ${line1} ${line2} Z`;
};

renderingParams.direction - vector to which arrow should be rotated
renderingParams.shift - vector to which arrow should be shifted
renderingParams.arrowLength - length that arrow should cover

Custom Arrows