First, you should load recharts:

library(recharts)

1 Introduction

Line, bar, scatter, k and eventRiver charts are based on Cartesian Coordinate System, which calls for x-axis and y-axis. When you generate an Echarts object under Cartesian Coordiante System using echartr, you can then modify the axes by setAxis. The work functions of this family are setXAxis, setYAxis, setX1Axis, setY1Axis.

2 Function Call

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

setAxis(chart, series = NULL, which = c("x", "y", "x1", "y1"),
  type = c("value", "category", "time", "log"), show = TRUE,
  position = c("bottom", "top", "left", "right"), name = "",
  nameLocation = c("end", "start"), nameTextStyle = emptyList(),
  boundaryGap = c(0, 0), min = NULL, max = NULL, scale = TRUE,
  splitNumber = NULL, axisLine = list(show = TRUE, onZero = FALSE),
  axisTick = list(show = FALSE), axisLabel = list(show = TRUE),
  splitLine = list(show = TRUE), splitArea = list(show = FALSE),
  data = list())
set_axis(chart, series = NULL, which = c("x", "y", "x1", "y1"),
  type = c("value", "category", "time", "log"), show = TRUE,
  position = c("bottom", "top", "left", "right"), name = "",
  nameLocation = c("end", "start"), nameTextStyle = emptyList(),
  boundaryGap = c(0, 0), min = NULL, max = NULL, scale = TRUE,
  splitNumber = NULL, axisLine = list(show = TRUE, onZero = FALSE),
  axisTick = list(show = FALSE), axisLabel = list(show = TRUE),
  splitLine = list(show = TRUE), splitArea = list(show = FALSE),
  data = list())

setYAxis(chart, ...)
set_axis_y(chart, ...)

setY1Axis(chart, ...)
set_axis_y1(chart, ...)

setXAxis(chart, ...)
set_axis_x(chart, ...)

setX1Axis(chart, ...)
set_axis_x1(chart, ...)
Arg Requirement

chart

Echarts object generated by echartR or echart.

series

Which series to be put on this axis. When set NULL, apply to all. Could be:

  • series names, in vectors. E.g, c(‘setosa’, ‘virginica’);
  • index of series, in vectors. E.g., 1:2 or c(1,3).

which

Which axis to be modified. Could be one of the following:

  • x: primary x-axis
  • y: primary y-axis
  • x1: secondary x-axis
  • y1: secondary y-axis

type

Type of the axis. Could be c(‘time’, ‘value’, ‘category’, ‘log’). Default ‘value’.

show

Logical, whether to show this axis. Default TRUE.

position

Position of this axis. Could be c(‘bottom’, ‘top’, ‘left’, ‘right’) (default for primary x axis, secondary x axis, primary y axis and secondary y axis, respectively.)

name

Name of this axis. Default not set (“”).

nameLocation

Location of the axis name. Could be c(‘start’, ‘end’). Default ‘end’.

nameTextStyle

Axis name text style. Could be a list of textStyle features. Default following textStyle global settings.

boundaryGap

A two-element numeric vector, defining the policy of the space at the two ends of the axis (percents). Deafult c(0, 0).

min

The mininum value of the axis. Default NULL (automatic). If a numeric value is set, boundaryGap is disabled.

max

The maxinum value of the axis. Default NULL (automatic). If a numeric value is set, boundaryGap is disabled.

scale

Logical, for axis of ‘value’, ‘time’, ‘log’ type, to define whether zoom the scale to the range between _min and _max. Default TRUE.

splitNumber

Numeric, how many sections to devide the axis. Default NULL, automatically deviding based on algorithms of min and max.

axisLine

A list. Default: list(show=TRUE, onZero=FALSE, lineStyle=lineStyle( type='solid', color='#48b', width=2, shadowColor='rgba(0,0,0,0)', shadowBlur=5, shadowOffsetX=3, shadowOffsetY=3))

axisTick

A list. Default: list(show=FALSE, inside=FALSE, length=5, lineStyle=lineStyle(color="#333", width=1))

axisLabel

A list controlling the axis labels. Default list(show=TRUE, rotate=0, margin=8, clickable=FALSE, formatter=NULL, textStyle=list(color="#333")) formatter could be a sprintf/format string or JS function/expression. axisLabel=list(formatter="%s cm") is equal to

  • axisLabel=list(formatter=JS('function (value) {return value + "cm";}')) or
  • axisLabel=list(formatter='{value} cm')

splitLine

A list controlling the split lines. Default list(show=TRUE, lineStyle=``lineStyle(color=list("#ccc"), width=1, type="solid"))

splitArea

A list controlling the split areas. Default list(show=FALSE, onGap=NULL, areaStyle=areaStyle(color= list("rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)") , type="default")

data

A character vector/list for axis of type ‘category’, to define the text labels shown in this axis. Default NULL. You can even pass in a complicated list with textSytle list: list('Jan', 'Feb', 'Mar', list(value='Apr', textStyle=list(color='red', ...)), 'May', ...)

…

Elipsis.

3 Showcase

3.1 Data Preparation

Let’s use airquality to generate 4 Echarts objects g1 - g4:

timeline mono series multi series
no g1 g2
yes g3 g4 
require(data.table)
## Loading required package: data.table
aq <- airquality
aq$Date <- as.Date(paste('1973', aq$Month, aq$Day, sep='-'))
g1 <- echartr(aq, Date, Temp, type='curve') %>% setToolbox(pos=3)
g2 <- echartr(aq, Day, Temp, Month, type='curve') %>% setToolbox(pos=3)
g3 <- echartr(aq, Day, Temp, t=Month, type='curve') %>% setToolbox(pos=3)
aq1 <- melt(aq, id=c('Month', 'Day'), measure=c('Temp', 'Wind'), 
            variable='Param')
g4 <- echartr(aq1, Day, value, Param, t=Month, type='curve') %>% 
    setToolbox(pos=3)

3.2 Modification

You can change the appearance of the axis: axis title, split number, axis tick labels. Pay attention to formatter in axisLabel: it requires JavaScript, so you can always compose a JS function. Or you can use a sprintf format string.

g1 %>% setXAxis(name='m/d', splitNumber=20, axisLabel=list(
    formatter='%m/%d', rotate=90)) %>%
    setYAxis(axisLabel=list(formatter='{value} °C'))

is equivalent to

g1 %>% setXAxis(name='m/d', splitNumber=20, axisLabel=list(
       formatter=JS('function (v) {
                    return v.getMonth() + 1 + "/" + v.getDate();
                    }'),
       rotate=90)) %>%
       setYAxis(axisLabel=list(formatter='{value} °C'))

You can set series 2-4 (June-August) to secondary y-axis…

g2 %>% setY1Axis(series=2:4, name='Summer Temp')

but you cannot assign timeline-specific axes. What about an academic style axis? That means removing all the vertical splitLines and set the borderWidth of the pane grid zero.

g3 %>% setXAxis(splitLine=list(show=FALSE)) %>% setGrid(borderWidth=0) %>%
    setYAxis(axisLine=list(lineStyle=lineStyle(width=0)))

Let’s wrap up all the features.

g4 %>% setY1Axis(series='Wind', axisLine=list(lineStyle=lineStyle(width=0)), 
                 name='Wind', axisLabel=list(formatter="%.1f mph"), min=0) %>%
    setXAxis(splitLine=list(show=FALSE), axisLine=list(
        lineStyle=lineStyle(color='darkgray'))) %>% 
    setYAxis(axisLine=list(lineStyle=lineStyle(width=0)), 
             axisLabel=list(formatter="%.1f °C"), min=0, name='Temp') %>% 
    setGrid(borderWidth=0)