Edge Labels

There are several properties on an edge mapping that you can use to configure labels for your edges.

Static labels

Here, we hardcode a label for every edge by setting it as a string:

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "view": {
    "edges": {
      "default": {
        "label": "Edge"
      }
    }
  }
});

Dynamic labels

You can extract the value of each edge's label from the edge's backing data:

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "view": {
    "edges": {
      "default": {
        "label": "{{label}}"
      }
    }
  }
});

Custom CSS class

You can provide your own class/classes to set on the element JsPlumb uses for the edge label:

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "view": {
    "edges": {
      "default": {
        "label": "{{label}}",
        "labelClass": "myLabel"
      }
    }
  }
});

Provide a space-separated list if you wish to provide more than one class.

Label location

By default, an edge label will be assigned a location of 0.5 - meaning it will halfway along the edge path. You can change this by providing a labelLocation:

Vanilla JS

React

Angular

Vue

Svelte

import { newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "view": {
    "edges": {
      "default": {
        "label": "{{label}}",
        "labelClass": "myLabel",
        "labelLocation": 0.25
      }
    }
  }
});

You can also control this via a labelLocation value in your edge's backing data. For example, this edge:

{
    source:"someNode",
    target:"someOtherNode",
    data:{
        labelLocation:0.25
    }
}

would instruct JsPlumb to put the label at 0.25, and you would not need to set labelLocation in the edge mapping in your view.

Options

Name	Type	Description
label?	string	Optional label to use for the edge. If this is set, a label overlay will be created and the value of label will be used as the overlay's label. This value can be parameterised, in order to extract a value from the edge's backing data, eg. if you set label:"{{name}}" then the Toolkit would attempt to extract a property with key name from the edge's backing data, and use that property's value as the label.
labelClass?	string	Optional css class to set on the label overlay created if label is set. This is a static string and does not support parameterisation like label does.
labelLocation?	number	Optional location for the label. If not provided this defaults to 0.5, but the label location can be controlled via the labelLocationAttribute.
labelLocationAttribute?	string	This defaults to labelLocation, and indicates the name of a property whose value can be expected to hold the location at which the label overlay should be located. The default value for this is labelLocation, but the key here is that the Toolkit looks in the edge data for labelLocation, so the location is dynamic, and can be changed by updating labelLocation. This parameter allows you to change the name of the property that the Toolkit will look for in the edge data.