How to set the Node label color?

Custom Components
1

Summary

I’m trying to set the Node label color of streamlit-agraph with no success.
I tried both to use the Config to pass specific css style and and Node parameters but none of them did the trick for me. Perhaps this is something that needs to be done from the config.toml?
I also tried to fork GitHub - ChrisDelClea/streamlit-agraph: A Streamlit Graph Vis and override default css but no luck with that ridicules approach as well.
Any leads, ideas or suggestions would be much appreciated.

Steps to reproduce

You can use the following simple example or any other example for that matter.
I would just like the Node label (the text below the shape) to be in white.
It might be that I’m using a custom config.toml or streamlit theme that might override the label color?

Code snippet:

from streamlit_agraph import agraph, Node, Edge, Config

config = Config(width=500,
                height=400,
                directed=True, 
                physics=True, 
                hierarchical=False,
                node={
                    'labelProperty': 'label',
                    'style': {"color": "#FFFFFF"},
                    'renderLabel': True
                },
                nodeHighlightBehavior=True,
                color="#FFFFFF",
                strokeColor="#FFFFFF"
                )

nodes = []
edges = []

nodes.append(Node(id='Spiderman', 
                label='Spiderman', 
                size=25,
                labelColor='#FFFFFF',                            
                shape="diamond"
                )) 
nodes.append(Node(id='Captain_Marvel', 
                label='Captain_Marvel',
                size=25,
                labelColor='#FFFFFF',                            
                shape="diamond"
                )) 
edges.append(Edge(source="Captain_Marvel", label="friend_of", target="Spiderman"))
agraph(nodes, edges, config)

Debug

  • Streamlit version: 1.25.0
  • streamlit-agraph 0.0.45
  • Python version: 3.10.4
  • OS version: MacOS
2

I was able to control the Node label color with the font property (see below - font={‘color’: ‘red’}).
It seems that streamlit-graph is using vis-network (I think…) and properties of the nodes and edges may be controlled by passing the correct kargs accordingly.
https://visjs.github.io/vis-network/d`Preformatted text`ocs/network/nodes.html

nodes.append(Node(id='Spiderman', 
                label='Spiderman', 
                size=25,
                font={'color': 'red'},
                shape="diamond"
                ))
3

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.