how do you background color of graph?

[jlgerber]

is it possible through css?

[magjac]

You can use the Graphviz bgcolor attribute in your DOT source, but of course you could use the CSS background property as well.

[DomParfitt]

As @magjac said you can use the attributes in the actual DOT graph string. For example the following would give a single node coloured red:

graph { 
  a[fillcolor=red style=filled]
}

If you want to use CSS it's just a case of applying the correct styling to the correct SVG element. The entire graph is rendered inside an SVG polygon element. So, you could include the following to colour the entire background red:

polygon {
    fill: red;
}

The actual graph nodes are rendered as ellipses, so you can override the background colour for nodes using that, or by applying the DOT attributes as above.

Hope that helps. Let me know if you need any further help although I'm by no means a CSS expert.

[jlgerber]

Thank you! Is there a way of affecting the edge colors via css as well?

On Tue, Jul 30, 2019 at 2:07 PM Dom Parfitt notifications@github.com wrote:

As @magjac https://github.com/magjac said you can use the attributes in the actual DOT graph string. For example the following would give a single node coloured red:

graph { a[fillcolor=red style=filled] }

If you want to use CSS it's just a case of applying the correct styling to the correct SVG element. The entire graph is rendered inside an SVG polygon element. So, you could include the following to colour the entire background red:

polygon { fill: red; }

The actual graph nodes are rendered as ellipses, so you can override the background colour for nodes using that, or by applying the DOT attributes as above.

Hope that helps. Let me know if you need any further help although I'm by no means a CSS expert.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/DomParfitt/graphviz-react/issues/12?email_source=notifications&email_token=AAKLSS6DPDXROYW7U3ZDWITQCCUSPA5CNFSM4IH5JQ2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3FKESQ#issuecomment-516596298, or mute the thread https://github.com/notifications/unsubscribe-auth/AAKLSS7WHLCNBBRITF4Z5ADQCCUSPANCNFSM4IH5JQ2A .

[DomParfitt]

Yes, the edges are rendered as SVG path elements, so you can set the line colour in CSS using the stroke property, like so:

path {
  stroke: red;
}

It's worth noting that if you're using a digraph this won't fill the pointers on the edges. The pointers are SVG polygon elements so obviously if you try to set these whilst also setting the background colour using CSS you'll get a clash. It's probably worth using the classes of the elements to do the selection. Everything is wrapped in an SVG g element, which has a class (graph, node or edge). So to select all edges and colour them you could do:

.edge>path {
  stroke: red;
}

.edge>polygon {
  stroke: red;
  fill: red;
}

Hope that helps.