✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.

Marker Styling in R

How to style markers in R.


Write, deploy, & scale Dash apps and R data visualizations on a Kubernetes Dash Enterprise cluster.
Get Pricing  |  Demo Dash Enterprise  |  Dash Enterprise Overview


New to Plotly?

Plotly is a free and open-source graphing library for R. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

Add Marker Border

In order to make markers distinct, you can add a border to the markers. This can be achieved by adding the line dict to the marker dict. For example, marker:{..., line: {...}}.

library(plotly)

x <- runif(500, min=3, max=6)
y <- runif(500, min=3, max=6)

fig <- plot_ly(type = 'scatter', mode = 'markers') 
fig <- fig %>%
  add_trace(
    x = x,
    y = y,
    marker = list(
      color = 'rgb(17, 157, 255)',
      size = 20,
      line = list(
        color = 'rgb(231, 99, 250)',
        width = 2
      )
    ),
    showlegend = F
  ) 
fig <- fig %>%
  add_trace(
    x = c(2),
    y = c(4.5),
    marker = list(
      color = 'rgb(17, 157, 255)',
      size = 120,
      line = list(
        color = 'rgb(231, 99, 250)',
        width = 12
      )
    ),
    showlegend = F
  )

fig

Fully Opaque

Fully opaque, the default setting, is useful for non-overlapping markers. When many points overlap it can be hard to observe density.

library(plotly)

x <- runif(500, min=3, max=6)
y <- runif(500, min=3, max=6)

fig <- plot_ly(type = 'scatter', mode = 'markers') 
fig <- fig %>%
  add_trace(
    x = x,
    y = y,
    marker = list(
      color = 'rgb(17, 157, 255)',
      size = 20,
      line = list(
        color = 'rgb(231, 99, 250)',
        width = 2
      )
    ),
    showlegend = F
  ) 
fig <- fig %>%
  add_trace(
    x = c(2,2),
    y = c(4.25,4.75),
    marker = list(
      color = 'rgb(17, 157, 255)',
      size = 120,
      line = list(
        color = 'rgb(231, 99, 250)',
        width = 12
      )
    ),
    showlegend = F
  )

fig

Opacity

Setting opacity outside the marker will set the opacity of the trace. Thus, it will allow greater visbility of additional traces but like fully opaque it is hard to distinguish density.

library(plotly)

x <- runif(500, min=3, max=6)
y <- runif(500, min=3, max=4.5)
x2 <- runif(500, min=3, max=6)
y2 <- runif(500, min=4.5, max=6)

fig <- plot_ly(type = 'scatter', mode = 'markers') 
fig <- fig %>%
  add_trace(
    x = x,
    y = y,
    opacity = 0.5,
    marker = list(
      color = 'rgb(17, 157, 255)',
      size = 20,
      line = list(
        color = 'rgb(231, 99, 250)',
        width = 2
      )
    ),
    name = 'Opacity 0.5'
  ) 
fig <- fig %>%
  add_trace(
    x = x2,
    y = y2,
    marker = list(
      color = 'rgb(17, 157, 255)',
      size = 20,
      line = list(
        color = 'rgb(231, 99, 250)',
        width = 2
      )
    ),
    name = 'Opacity 1.0'
  ) 
fig <- fig %>%
  add_trace(
    x = c(2,2),
    y = c(4.25,4.75),
    opacity = 0.5,
    marker = list(
      color = 'rgb(17, 157, 255)',
      size = 120,
      line = list(
        color = 'rgb(231, 99, 250)',
        width = 12
      )
    ),
    showlegend = F
  )

fig

Marker Opacity

To maximise visibility of density, it is recommended to set the opacity inside the marker marker:{opacity:0.5}. If mulitple traces exist with high density, consider using marker opacity in conjunction with trace opacity.

library(plotly)

x <- runif(500, min=3, max=6)
y <- runif(500, min=3, max=6)

fig <- plot_ly(type = 'scatter', mode = 'markers') 
fig <- fig %>%
  add_trace(
    x = x,
    y = y,
    marker = list(
      color = 'rgb(17, 157, 255)',
      size = 20,
      opacity = 0.5,
      line = list(
        color = 'rgb(231, 99, 250)',
        width = 2
      )
    ),
    showlegend = F
  ) 
fig <- fig %>%
  add_trace(
    x = c(2,2),
    y = c(4.25,4.75),
    marker = list(
      color = 'rgb(17, 157, 255)',
      size = 120,
      opacity = 0.5,
      line = list(
        color = 'rgb(231, 99, 250)',
        width = 12
      )
    ),
    showlegend = F
  )

fig

Color Opacity

To maximise visibility of each point, set the color opacity by using alpha: marker:{color: 'rgba(0,0,0,0.5)'}. Here, the marker line will remain opaque.

library(plotly)

x <- runif(500, min=3, max=6)
y <- runif(500, min=3, max=6)

fig <- plot_ly(type = 'scatter', mode = 'markers') 
fig <- fig %>%
  add_trace(
    x = x,
    y = y,
    marker = list(
      color = 'rgba(17, 157, 255,0.5)',
      size = 20,
      line = list(
        color = 'rgb(231, 99, 250)',
        width = 2
      )
    ),
    showlegend = F
  ) 
fig <- fig %>%
  add_trace(
    x = c(2,2),
    y = c(4.25,4.75),
    marker = list(
      color = 'rgba(17, 157, 255,0.5)',
      size = 120,
      line = list(
        color = 'rgb(231, 99, 250)',
        width = 12
      )
    ),
    showlegend = F
  )

fig

Reference

See https://plotly.com/r/reference/ for more information and chart attribute options!

What About Dash?

Dash for R is an open-source framework for building analytical applications, with no Javascript required, and it is tightly integrated with the Plotly graphing library.

Learn about how to install Dash for R at https://dashr.plot.ly/installation.

Everywhere in this page that you see fig, you can display the same figure in a Dash for R application by passing it to the figure argument of the Graph component from the built-in dashCoreComponents package like this:

library(plotly)

fig <- plot_ly() 
# fig <- fig %>% add_trace( ... )
# fig <- fig %>% layout( ... ) 

library(dash)
library(dashCoreComponents)
library(dashHtmlComponents)

app <- Dash$new()
app$layout(
    htmlDiv(
        list(
            dccGraph(figure=fig) 
        )
     )
)

app$run_server(debug=TRUE, dev_tools_hot_reload=FALSE)