Dash-cytoscape arrow heads not showing up

Dash Python
1

Output:

image
image1920×1080 186 KB

Code to generate it:

import dash
import dash_cytoscape as cyto
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape-compound',
        layout={'name': 'preset'},
        style={'width': '100%', 'height': '700px'},
        stylesheet=[
            {
                'selector': 'node',
                'style': {'content': 'data(label)',
                          'text-halign':'center',
                          'text-valign':'center'}
            },
            {
                'selector': 'edge',
                'style': { #'line-style': 'dashed',
                          'target-arrow-color': 'blue',
                          'target-arrow-shape': 'vee',}
            }
        ],
        elements=[
            # Children Nodes
            {
                'data': {'id': 'A', 'label': 'A'},
                'position': {'x': 100, 'y': 100}
            },
            {
                'data': {'id': 'B', 'label': 'B'},
                'position': {'x': 100, 'y': 200}
            },
            {
                'data': {'id': 'C', 'label': 'C'},
                'position': {'x': 400, 'y': 100}
            },

            # Edges
            {
                'data': {'source': 'A', 'target': 'B'},
            },
            {
                'data': {'source': 'B', 'target': 'C'},
            },
            {
                'data': {'source': 'A', 'target': 'C'},
            }
        ]
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)
2 Likes
2

Although this is quite old, I had the same problem and it is solved by setting the parameter curve-style to straight or bezier inside the style dictionary associated with the edge selector.

1 Like