Vis Network

Edge Styles

Image Arrow Heads

All formats supported by canvas are supported here (like SVG, PNG, JPG).
Image can be specified using any URL including data URLs.
Width and height can be set explicitly to scale the image to the desired size.
The arrow head points to the top with the point in the middle of the top edge of the image.


const options = {
  edges: {
    arrows: {
      to: {
        enabled: true,
        type: "image",
        imageWidth: 24,
        imageHeight: 24,
        src:
          "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H9.18C9.6,1.84 10.7,1 12,1C13.3,1 14.4,1.84 14.82,3H19M12,8L7,13H10V17H14V13H17L12,8M12,3A1,1 0 0,0 11,4A1,1 0 0,0 12,5A1,1 0 0,0 13,4A1,1 0 0,0 12,3Z' /%3E%3C/svg%3E"
      }
    }
  }
};