Dash Cytoscape multi-line edge/node labels

Dash Python
1

Hi Everyone,

I’m trying to add some simple new lines into the labels in a basic Cytoscape graph. At some point, my labels will be very long, and I’ll want to programmatically break them up with newline characters.

Unfortunately, I can’t figure out how to get multi-line labels. I’ve tried “\n”, “
”, etc. and can’t figure out how to pass in a “newline” character. Here’s a reproducible simple example:

app.layout = html.Div([
cyto.Cytoscape(
    id='cytoscape-nodes',
    layout={'name': 'breadthfirst', 'roots': '[id = "one"]'},
    style={'width': '100%', 'height': '500px'},
    elements=[
        {'data': {'id': 'one', 'label': " Line1 \n Line2"}},
        {'data': {'id': 'two', 'label': " Line1 \n Line2"}},
        {'data': {'id': 'three', 'label': " Line1 \n Line2"}},
        {'data': {'source': 'one', 'target': 'two', 'label': 'Edge1 \n Edge1'}},
        {'data': {'source': 'one', 'target': 'three', 'label': 'Edge2 \n Edge2'}},
    ],
    stylesheet=[
        {'selector': 'edge', 'style': { 'label': 'data(label)'}},
        {'selector': 'node', 'style': { 'label': 'data(label)'}},
    ],
)])

Thanks in advance for any pointers!

2

Use the following in the stylesheet:

{'selector': 'node', 'style': { 'label': 'data(label)'}, "text-wrap": "wrap"},

1 Like
3

Thank you @vivekvs1, it worked! Appreciate it :)!

1 Like