r - Adding a legend to a visNetwork graph - Stack Overflow

I have this graph in R.

First, I simulated the data:

library(igraph)
library(visNetwork)

set.seed(123)

n_nodes <- 20
g <- erdos.renyi.game(n_nodes, p = 0.2)

node_colors <- sample(c("red", "blue"), n_nodes, replace = TRUE)

Then, I created the graph:

nodes_df <- data.frame(
  id = 1:n_nodes,
  label = paste("Node", 1:n_nodes),
  color = node_colors,

  font.size = 20,
  shadow = TRUE
)


edges_df <- data.frame(
  from = ends(g, E(g))[,1],
  to = ends(g, E(g))[,2]
)

Finally I plotted it:

visNetwork(nodes_df, edges_df) %>%
  visPhysics(solver = "forceAtlas2Based") %>%
  visOptions(highlightNearest = TRUE) %>%
  visLayout(randomSeed = 123)

I would like to add a color legend to this.

After some digging, I tried to do it like this:

visNetwork(nodes_df, edges_df) %>%
  visPhysics(
    solver = "forceAtlas2Based",
    stabilization = list(
      enabled = TRUE, 
      iterations = 1000
    )
  ) %>%
  visOptions(highlightNearest = TRUE) %>%
  visLayout(randomSeed = 123) %>%
  visLegend(
    useGroups = FALSE,
    addNodes = data.frame(
      label = c("Red Group", "Blue Group"),
      color = c("red", "blue"),
      shape = "dot",
      size = 25
    ),
    width = 0.15,
    position = "right",
    main = list(
      text = "Groups",
      style = "font-family: Arial; font-size: 16px; font-weight: bold;"
    ),
    ncol = 1
  ) %>%
  visInteraction(
    dragNodes = TRUE,
    dragView = TRUE,
    zoomView = TRUE
  )

But its looking a bit awkward. Ideally I would like the legend to look more natural like this:

What can I try next?

I have this graph in R.

First, I simulated the data:

library(igraph)
library(visNetwork)

set.seed(123)

n_nodes <- 20
g <- erdos.renyi.game(n_nodes, p = 0.2)

node_colors <- sample(c("red", "blue"), n_nodes, replace = TRUE)

Then, I created the graph:

nodes_df <- data.frame(
  id = 1:n_nodes,
  label = paste("Node", 1:n_nodes),
  color = node_colors,

  font.size = 20,
  shadow = TRUE
)


edges_df <- data.frame(
  from = ends(g, E(g))[,1],
  to = ends(g, E(g))[,2]
)

Finally I plotted it:

visNetwork(nodes_df, edges_df) %>%
  visPhysics(solver = "forceAtlas2Based") %>%
  visOptions(highlightNearest = TRUE) %>%
  visLayout(randomSeed = 123)

I would like to add a color legend to this.

After some digging, I tried to do it like this:

visNetwork(nodes_df, edges_df) %>%
  visPhysics(
    solver = "forceAtlas2Based",
    stabilization = list(
      enabled = TRUE, 
      iterations = 1000
    )
  ) %>%
  visOptions(highlightNearest = TRUE) %>%
  visLayout(randomSeed = 123) %>%
  visLegend(
    useGroups = FALSE,
    addNodes = data.frame(
      label = c("Red Group", "Blue Group"),
      color = c("red", "blue"),
      shape = "dot",
      size = 25
    ),
    width = 0.15,
    position = "right",
    main = list(
      text = "Groups",
      style = "font-family: Arial; font-size: 16px; font-weight: bold;"
    ),
    ncol = 1
  ) %>%
  visInteraction(
    dragNodes = TRUE,
    dragView = TRUE,
    zoomView = TRUE
  )

But its looking a bit awkward. Ideally I would like the legend to look more natural like this:

What can I try next?

• r
• visnetwork

Share Improve this question Follow edited Feb 2 at 18:05 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Jan 31 at 18:27 user430997user430997 52711 silver badge1111 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I, too, have frustrations with visNetwork legends - while 'awkward' and 'natural' are somewhat subjective, I can share my programmatic workaround (i.e, "hack") that may help you dial in the aesthetics to exactly what you want.

The trick is to include the legend title as an invisible shape in your legend, and add in a column for font.size. Importantly, increasing the size value of the point corresponding to the invisible "Groups" title will change the vertical appearance of the title (here I have it at 30).

legend_nodes <- data.frame(
  label = c("Groups", "Red Group", "Blue Group"), 
  color = c("white", "red", "blue"),
  shape = c("dot", "dot", "dot"),
  size = c(30, 20, 20),
  font.size = c(20, 14, 14)
)

Then add this in to your existing code and dial in the width to your preference.

visNetwork(nodes_df, edges_df) %>%
  visPhysics(solver = "forceAtlas2Based") %>%
  visOptions(highlightNearest = TRUE) %>%
  visLayout(randomSeed = 123) %>%
  visLegend(addNodes = legend_nodes, 
            useGroups = FALSE,
            width = 0.20)