Browser styling

You can customize your graph query result either in place or by using Graph Stylesheet (GraSS).

Style your graph visualization in place

Neo4j Browser provides functionality for styling with color and size, based on node labels and relationship types.

browser style1
Figure 1. Label and type overview

If you select a node label in the Results overview, there are several styling options available:

  • Color — set the color for nodes of the selected label.

  • Size  — set the size for nodes of the selected label.

  • Caption — set what should be displayed as the caption for nodes of the selected label.

browser style2
Figure 2. Set node style

Some nodes have more than one label and such a node is styled by the first label. You can reorder the labels in the Results overview panel. Note that all node labels present in your graph are listed in the Results overview panel, not just the ones returned by your query.

styling priority
Figure 3. Reorder labels

If you select a relationship type in the Overview, there are several styling options available:

  • Color — set the color for relationships of the selected type.

  • Line width  — set the line width for relationships of the selected type.

  • Caption — set what should be displayed as the caption for relationships of the selected type.

browser style3
Figure 4. Set relationship style

Style your graph visualization using a GraSS file

Alternatively, follow the steps to customize your styles by importing a graph stylesheet (GraSS) file for Neo4j Browser to reference.

  1. Run the command :style and download your current graph style with the Download button in the result frame.

    Neo4j supports both CSS and JSON format as a .grass file contents.
    Example 1. Sample of a .grass file contents
    node.Status {
  color: #F79767;
  size: 60px;
  caption: "{name}";
}
node.Person {
  color: #DA7194;
  size: 30px;
  caption: "{name}";
}
node.Movie {
  caption: "{title}";
}
relationship.ACTED_IN {
  width: 5px;
  caption: "{roles}"
  color: #959AA1;
}

    If a node has 2 styled labels, only the first (closest to top) style is applied. If a node does not have a label that is in the GraSS, node is used as the default. Same applies to relationships.

  2. Edit and save the downloaded file locally using your editor of choice.

  3. Use the Upload button to import the saved file to Neo4j Browser.

The GraSS parser is open source.