Skip to contents

Themes

John Coene

2024-02-16

Source: vignettes/themes.Rmd
themes.Rmd

You can easily customise the appearance of your chart using one of the 13 themes provided, or even build you own theme: use the online theme builder to create your own.

default 

p <- USArrests |> 
  tibble::rownames_to_column("State") |> 
  dplyr::mutate(Rape = -Rape) |> 
  e_charts(State) |> 
  e_line(Murder) |> 
  e_area(Rape, name = "Sick basterd", x_index = 1) |>  # second y axis
  e_title("Your plot", "Subtext", sublink = "https://john-coene.com") |> 
  e_x_axis(index = 1, show = FALSE) |> # hide second X Axis
  e_tooltip(trigger = "axis")

p # default plot

dark 

p |> e_theme("dark")

vintage 

p |> e_theme("vintage")

westeros 

p |> e_theme("westeros")

essos 

p |> e_theme("essos")

wonderland 

p |> e_theme("wonderland")

walden 

p |> e_theme("walden")

chalk 

p |> e_theme("chalk")

infographic 

p |> e_theme("infographic")

macarons 

p |> e_theme("macarons")

roma 

p |> e_theme("roma")

shine 

p |> e_theme("shine")

purple-passion 

p |> e_theme("purple-passion")

halloween 

p |> e_theme("halloween")

azul 

p |> e_theme("azul")

blue 

p |> e_theme("blue")

caravan 

p |> e_theme("caravan")

carp 

p |> e_theme("carp")

cool 

p |> e_theme("cool")

dark-blue 

p |> e_theme("dark-blue")

dark-bold 

p |> e_theme("dark-bold")

dark-digerati 

p |> e_theme("dark-digerati")

dark-fresh-cut 

p |> e_theme("dark-fresh-cut")

dark-mushroom 

p |> e_theme("dark-mushroom")

forest 

p |> e_theme("forest")

fresh-cut 

p |> e_theme("fresh-cut")

fruit 

p |> e_theme("fruit")

gray 

p |> e_theme("gray")

green 

p |> e_theme("green")

helianthus 

p |> e_theme("helianthus")

inspired 

p |> e_theme("inspired")

london 

p |> e_theme("london")

macarons 

p |> e_theme("macarons")

macarons2 

p |> e_theme("macarons2")

mint 

p |> e_theme("mint")

red 

p |> e_theme("red")

red-velvet 

p |> e_theme("red-velvet")

royal 

p |> e_theme("royal")

sakura 

p |> e_theme("sakura")

tech-blue 

p |> e_theme("tech-blue")

custom 

p |> e_theme_custom('{"color":["#ff715e","#ffaf51"]}')

The above is an admittedly small theme, if you want to create a large custom theme, download the JSON from the theme builder and use it, e_theme_custom and e_register_theme both detect the json file and read it in.

// theme.json
{
  "color":["#ff715e","#ffaf51"],
  "backgroundColor": "black"
}
# in R
p |> e_theme_custom("theme.json")

The method above, however, registers the theme every time the chart is drawn, if displaying multiple charts this can leads to large html files or slower Shiny application. There is thus also the function e_theme_register to register the custom theme once, and subsequently use it.

library(shiny)
library(echarts4r)

ui <- fluidPage(
  e_theme_register('{"color":["#ff715e","#ffaf51"]}', name = "myTheme"),
  echarts4rOutput("chart1"),
  echarts4rOutput("chart2")
)

server <- function(input, output){
  e <- e_charts(cars, speed) |> 
      e_scatter(dist) 

  output$chart1 <- renderEcharts4r({
    e_theme(e, "myTheme")
  })

  output$chart2 <- renderEcharts4r({
    e_theme(e, "myTheme")
  })

}

shinyApp(ui, server)

Note that the custom theme registered as above works with e_common, e.g.: e_common(theme = "myTheme").