Styles Documentation

Default styling of the alchemy graph's comes from the alchemy.css file.

Most of the different styles that can be over written are obvious from the alchemy sass files found here.

A couple popular overrides might be the following (in plane ol css):

# set the color of all of the edges to red on :hover
.alchemy line:hover {red;}

# set the stroke width and color of all nodes
.alchemy .node circle {
  fill: yellow;
  stroke-width: 2px;
}

Alchemy.js also allows for more complex overrides:

# set the font size to 48 for only the root nodes
.alchemy .node.root text {
  font-size: 20px;
}

# set the color to blue and the text size on all nodes that are of the type 'movie'
# see [node_types](#) documentation for more information on how alchemy assigns classes to node elements

.alchemy .node.movie text {
  font-size: 20px;
  fill: blue;
}