First, you should load recharts:

library(recharts)

1 Introduction

setTheme is the main aesthetic function in recharts. It can

  • set pre-installed themes
  • set color palette
  • set misc aesthetic features

2 Function Call

All the function names have two forms: small camel and lowercase_underscore (endorsed by Hadley Wickham).

setTheme(chart, theme = c("asis", "default", "macarons", "infographic",
  "blue", "dark", "gray", "green", "helianthus", "macarons2", "mint", "red",
  "roma", "sakura", "shine", "vintage"), palette = "asis", bgColor = NULL,
  renderAsImage = FALSE, calculable = FALSE, calculableColor = NULL,
  calculableHolderColor = NULL, animation = TRUE, animationEasing = NULL,
  animationDuration = NULL, width = NULL, height = NULL, ...)

set_theme(chart, theme = c("asis", "default", "macarons", "infographic",
  "blue", "dark", "gray", "green", "helianthus", "macarons2", "mint", "red",
  "roma", "sakura", "shine", "vintage"), palette = "asis", bgColor = NULL,
  renderAsImage = FALSE, calculable = FALSE, calculableColor = NULL,
  calculableHolderColor = NULL, animation = TRUE, animationEasing = NULL,
  animationDuration = NULL, width = NULL, height = NULL, ...)
Arg Requirement

chart

Echarts object generated by echartR or echart.

theme

theme name or theme object

  • pre-installed themes
    • ‘default’, ‘macarons’, ‘infographic’, ‘blue’, ‘dark’, ‘gray’, ‘green’, ‘helianthus’, ‘macarons2’, ‘mint’, ‘red’, ‘roma’, ‘sakura’, ‘shine’, ‘vintage’
  • user-defined themes
    • A list. E.g., list(color=c('#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed'), title=list(x='left', y='top'), legend=list(orient='horizontal'))

palette

name of the palette or a color vector. Default NULL to get echarts default.

  • ‘asis’
    • keep the color palette applied in current echarts object
  • Echarts theme palette
    • “_default“,”_macarons“,”_infographic“,”_blue“,”_dark“,”_gray“,”_green“,”_helianthus“,”_macarons2“,”_mint“,”_red“,”_roma“,”_sakura“,”_shine“,”_vintage"
  • RColorBrewer palettes
    • ‘BrBG’, ‘PiYG’, ‘PRGn’, ‘PuOr’, ‘RdBu’, ‘RdGy’, ‘RdYlBu’, ‘RdYlGn’, ‘Spectral’, ‘Accent’, ‘Dark2’, ‘Paired’, ‘Pastel1’, ‘Pastel2’, ‘Set1’, ‘Set2’, ‘Set3’, ‘Blues’, ‘BuGn’, ‘BuPu’, ‘GnBu’, ‘Greens’, ‘Greys’, ‘Oranges’, ‘OrRd’, ‘PuBu’, ‘PuBuGn’, ‘PuRd’, ‘Purples’, ‘RdPu’, ‘Reds’, ‘YlGn’, ‘YlGnBu’, ‘YlOrBr’, ‘YlOrRd’
  • ggthemes palettes
    • ‘calc’, ‘economist’, ‘economist_white’, ‘economist_stata’, ‘excel’, ‘exel_fill’, ‘excel_line’, ‘excel_new’, ‘few’, ‘fivethirtyeight’, ‘538’, ‘manyeyes’, ‘gdocs’, ‘pander’, ‘tableau’, ‘stata’, ‘stata1’,‘stata1r’,‘statamono’, ‘ptol’, ‘tableau20’, ‘tableau10medium’, ‘tableaugray’, ‘tableauprgy’, ‘tableaublrd’, ‘tableaugnor’, ‘tableaucyclic’, ‘tableau10light’, ‘tableaublrd12’, ‘tableauprgy12’, ‘tableaugnor12’,‘hc’,‘darkunica’, ‘solarized’, ‘solarized_red’, ‘solarized_yellow’, ‘solarized_orange’, ‘solarized_magenta’, ‘solarized_violet’, ‘solarized_blue’, ‘solarized_cyan’, ‘solarized_green’, ‘wsj’, ‘wsj_rgby’, ‘wsj_red_green’, ‘wsj_black_green’, ‘wsj_dem_rep’, ‘colorblind’, ‘trafficlight’
  • others
    • ‘rainbow’, ‘terrain’, ‘topo’, ‘heat’, ‘cm’

Usage

  • If the value is not set, and the function defaults will be loaded
  • Set palette=NULL to use Echarts defaults
  • Set palette=palette name to assign any palette listed above
  • Set palette=palette name(number) to restrict number of colors within the palette (e.g., palette='calc(3)' picks 3 colors out of ‘calc’ RANDOMLY)
  • Set palette=c(color1, color2, color3, ...) to define a palette vector, made of which either color names or Hex expressions. Use colors() to check available color names and check the effects using demo(colors).

bgColor

Color name/value of the background. Default is transparent (‘rgba(0,0,0,0)’)

renderAsImage

Logical. If TRUE, the interactive effects are disabled. Default FALSE.

calculable

Logical. If TRUE, the chart is re-calculated after drag. Default FALSE.

calculableColor

The border color of the tooltip during calculable effect. Default ‘rgba(255,165,0,0.6)’.

calculableHolderColor

The color of calculableHolder. Default ‘#ccc’.

animation

Logical. If TRUE, the animation is on at initiation. Default TRUE. For IE8, it is recommended to set FALSE.

animationEasing

The slight moving effect of major elements. Default ‘ExponentialOut’. Other choices: ‘Linear’, ‘QuadraticIn’, ‘QuadraticOut’, ‘QuadraticInOut’, ‘CubicIn’, ‘CubicOut’, ‘CubicInOut’, ‘QuarticIn’, ‘QuarticOut’, ‘QuarticInOut’, ‘QuinticIn’, ‘QuinticOut’, ‘QuinticInOut’, ‘SinusoidalIn’, ‘SinusoidalOut’, ‘SinusoidalInOut’, ‘ExponentialIn’, ‘ExponentialInOut’, ‘CircularIn’, ‘CircularOut’, ‘CircularInOut’, ‘ElasticIn’, ‘ElasticOut’, ‘ElasticInOut’, ‘BackIn’, ‘BackOut’, ‘BackInOut’, ‘BounceIn’, ‘BounceOut’, ‘BounceInOut’

animationDuration

The duration into animation. Default 2000 (ms).

width

Width (px) of the whole chart. Default NULL (auto).

height

Height (px) of the whole chart. Default NULL (auto).

…

Elipsis

2.1 User-defined Theme (UDT)

You can design your prefered themes using http://echarts.baidu.com/echarts2/doc/example/themeDesigner.html.

The UDTs in echarts are JS objects. You can write it in a list form and setTheme will parse it into JSON string for process.

A typical theme JS looks like:

{
    color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed'], 
    title: {x: 'left', y: 'top'}, 
    legend: {orient: 'horizontal'} 
}

You should write in the format below:

list(
     color=c('#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed'), 
     title=list(x='left', y='top'), 
     legend=list(orient='horizontal')
)

3 Showcase

3.1 Pre-installed Themes

3.1.1 default

g <- echartr(mtcars, wt, mpg, carb, weight=hp, z=am, type='bubble') %>% 
    setSymbols('circle')
g

3.1.2 macarons

g %>% setTheme('macarons')

3.1.3 infographic

g %>% setTheme('infographic')

3.1.4 blue

g %>% setTheme('blue')

3.1.5 dark

g %>% setTheme('dark')

3.1.6 gray

g %>% setTheme('gray')

3.1.7 green

g %>% setTheme('green')

3.1.8 helianthus

g %>% setTheme('helianthus')

3.1.9 macarons2

g %>% setTheme('macarons2')

3.1.10 mint

g %>% setTheme('mint')

3.1.11 red

g %>% setTheme('red')

3.1.12 roma

g %>% setTheme('roma')

3.1.13 sakura

g %>% setTheme('sakura')

3.1.14 shine

g %>% setTheme('shine')

3.1.15 vintage

g %>% setTheme('vintage')

3.2 User-defined Theme

Let’s compose a UDT.

udt <- list(
    backgroundColor="#d5e4eb", grid=list(borderWidth=0),
    categoryAxis=list(axisLine=list(lineStyle=list(width=2)),
                      splitLine=list(lineStyle=list(width=1, color='white'))),
    valueAxis=list(splitLine=list(lineStyle=list(width=1, color='white')),
                   axisLine=list(lineStyle=list(width=0)))
)
g %>% setXAxis(splitLine=list(show=FALSE)) %>% setTheme(udt)

3.3 Palette

3.3.1 Theme Palettes

All the pre-installed theme contain a palette. If you do not apply all the sytles of the theme, you can assign palette='_theme name'. Remember to add a “_" in front of the theme name.

g %>% setTheme(palette="_dark")

3.3.2 RColorBrewer Palettes

You can also assign RColorBrewer palettes: ‘BrBG’, ‘PiYG’, ‘PRGn’, ‘PuOr’, ‘RdBu’, ‘RdGy’, ‘RdYlBu’, ‘RdYlGn’, ‘Spectral’, ‘Accent’, ‘Dark2’, ‘Paired’, ‘Pastel1’, ‘Pastel2’, ‘Set1’, ‘Set2’, ‘Set3’, ‘Blues’, ‘BuGn’, ‘BuPu’, ‘GnBu’, ‘Greens’, ‘Greys’, ‘Oranges’, ‘OrRd’, ‘PuBu’, ‘PuBuGn’, ‘PuRd’, ‘Purples’, ‘RdPu’, ‘Reds’, ‘YlGn’, ‘YlGnBu’, ‘YlOrBr’, ‘YlOrRd’.

g %>% setTheme(palette='PRGn')

3.3.3 ggthemes Palettes

You can assign ggthemes palettes: ‘calc’, ‘economist’, ‘economist_white’, ‘economist_stata’, ‘excel’, ‘exel_fill’, ‘excel_line’, ‘excel_new’, ‘few’, ‘fivethirtyeight’, ‘538’, ‘manyeyes’, ‘gdocs’, ‘pander’, ‘tableau’, ‘stata’, ‘stata1’,‘stata1r’,‘statamono’, ‘ptol’, ‘tableau20’, ‘tableau10medium’, ‘tableaugray’, ‘tableauprgy’, ‘tableaublrd’, ‘tableaugnor’, ‘tableaucyclic’, ‘tableau10light’, ‘tableaublrd12’, ‘tableauprgy12’, ‘tableaugnor12’,‘hc’,‘darkunica’, ‘solarized’,‘solarized_red’, ‘solarized_yellow’, ‘solarized_orange’, ‘solarized_magenta’, ‘solarized_violet’, ‘solarized_blue’, ‘solarized_cyan’, ‘solarized_green’, ‘wsj’, ‘wsj_rgby’, ‘wsj_red_green’, ‘wsj_black_green’, ‘wsj_dem_rep’, ‘colorblind’, ‘trafficlight’.

g %>% setTheme(palette='tableau20')

3.3.4 Other Palettes

You can assign other palettes: ‘rainbow’, ‘terrain’, ‘topo’, ‘heat’, ‘cm’.

g %>% setTheme(palette='terrain')

3.3.5 User-defined Palettes

You can also compose a palette by concatenating a vector of colors yourself. E.g.:

  • c(‘red’, ‘yellow’, ‘green’)
  • c(‘#FF0000’, ‘#FFFF00’, ‘#00FF00’)
g %>% setTheme(palette=c(
    'red', 'yellow', 'orange', 'limegreen', 'cyan', 'violet'))

3.4 Other Aesthetics

3.4.1 bgColor

g %>% setTheme(bgColor='darkblue')

3.4.2 renderAsImage

Disable the interactive effects.

g %>% setTheme(renderAsImage=TRUE)

3.4.3 calculable

Use pie chart for example. Try dragging a fan away.

echartr(mtcars, am, hp, type='ring') %>% 
    setTheme(calculable=TRUE, calculableColor='yellow', 
             calculableHolderColor='gold')

3.4.4 animation

g %>% setTheme(animation=TRUE, animationEasing='BounceInOut',
               animationDuration=500)

3.4.5 width And height

g %>% setTheme(width=400, height=300)