How to edit width on a graphviz chart

[chekos]

Hi all!
I’ve put together a small app that displays a decision tree at the end but even when I specify width, it’s too large to display. Here’s a zoomed out version so you can see what I’m talking about.

Is this a bug or am I missing something? How have y’all been displaying your graphviz plots?

[Marc]

Hi @chekos

You can try out the app in wide mode via the “hamburger menu” in the upper right corner. Go to settings.

Alternatively you can select change the width using a <style> element. You can find an example with code at awesome-streamlit.org in the gallery called “Layout Experiments”

[DaniCaminos]

Hi @chekos, and welcome to the forum!
If you want to edit the width of the current chart, you can add the value on the API call:

import streamlit as st
import graphviz as graphviz

finite = graphviz.Digraph("finite_state_machine", filename="fsm.gv")
finite.attr(rankdir="LR", size="8,5")

finite.attr("node", shape="doublecircle")
finite.node("LR_0")
finite.node("LR_3")

finite.attr("node", shape="circle")
finite.edge("LR_0", "LR_2", label="SS(B)")
finite.edge("LR_0", "LR_1", label="SS(S)")
finite.edge("LR_1", "LR_3", label="S($end)")
finite.edge("LR_2", "LR_6", label="SS(b)")
finite.edge("LR_2", "LR_5", label="SS(a)")

st.graphviz_chart(finite, width=200)

Please, let me know if this helps you.
Thanks.

[chekos]

Hi @DaniCaminos

The original picture I shared is using the width parameter, I think it might be a bug. Changing it doesn’t affect the final picture for me.

[DaniCaminos]

@chekos we have a PR open to improve the chart sizes handling. I think will be ready in a few days.

@tc1 will update this thread

[Haydn_He]

Hi there, in the old version (0.51), I’m able to scrolling to see whole picture of graphviz chart, while with latest version 0.52, seems the chart just fit with my screen width, no longer be able to scrolling, is there anything I can set?

Thanks a lot!

[DaniCaminos]

@Haydn_He this will be fixed when we release the PR mentioned above