Is it possible to position the label to the right of the nodes? (streamlit_agraph)

🧩 Streamlit Components
1

Hi guys. I have a question about Streamlit Agraph (amazing library btw :slight_smile:). I’m wondering if it is possible to position the label to the right of a node, instead of positioning it at the center or bellow the node.

I have a hierarchical graph, with “LR” direction and I would like the labels to appear at the right of the nodes.

This is the Config I’m using:

config = Config(width=GRAPH_WIDTH,
                    height=mid_height,
                    directed=False,
                    physics=False,
                    hierarchical=True,
                    direction="LR",
                    sortMethod="directed",
                    )
2

Hey @Marilia_Cristina,

Thanks for sharing this question!

I believe you can adjust the position of the label via the node.labelPosition parameter (doc here).

It should look something like this:

nodes = [Node(id=n['id'], label=n['name']) for n in json_nodes] # add value to payload
edges = [Edge(source= e['sourceId'], target=e['targetId']) for e in json_edges]

config = Config(width=1600, 
                height=1000, 
                directed=True,
                nodeHighlightBehavior=True, 
                highlightColor="#F7A7A6", 
                collapsible=True,
                node={'labelProperty':'label', 'labelPosition': 'right'}
                ) 

return_value = agraph(nodes=nodes, 
                      edges=edges, 
                      config=config)

(I haven’t tested this yet, so let us know if it works if you try it :pray:)

3

Thanks for answering @Caroline .

I tested it, but it didn’t work. The label still appears under the node :frowning:

4

Hey @Marilia_Cristina,

Sorry to hear that! Can you share a runnable code snippet?