First, you should load recharts:

library(recharts)

1 Introduction

setGrid is used to set the pane grid when the chart is based on Cartesian Coordinate System (but may also take effect in other charts).

setGrid family has two types of functions: setting grid and relocating widgets. The key is four parameters: x, y, x2, y2. The point (x, y) is the upper-left point of the widget/pane, while the point (x2, y2) is the lower-right point of the widgt/pane.

As every call of recharts functions automatically resizes the widgets, you are recommanded to put setGrid at the end of a pipe chain call.

2 Function Call

All the function names have two forms: small camel and lowercase_underscore (endorsed by Hadley Wickham). To be lazy, we also provide short forms as well (e.g., dz for dataZoom).

setGrid(chart, x = 80, y = 60, x2 = 80, y2 = 60, width = NULL,
  height = NULL, bgColor = NULL, borderColor = NULL, borderWidth = 1,
  widget = c("pane", "timeline", "legend", "title", "dataZoom", "dataRange",
  "toolbox", "roamController"), ...)
set_grid(chart, x = 80, y = 60, x2 = 80, y2 = 60, width = NULL,
  height = NULL, bgColor = NULL, borderColor = NULL, borderWidth = 1,
  widget = c("pane", "timeline", "legend", "title", "dataZoom", "dataRange",
  "toolbox", "roamController"), ...)

relocTitle(chart, x = NULL, y = NULL, ...)
move_title(chart, x = NULL, y = NULL, ...)

relocLegend(chart, x = NULL, y = NULL, ...)
move_legend(chart, x = NULL, y = NULL, ...)

relocDataZoom(chart, x = NULL, y = NULL, ...)
move_datazoom(chart, x = NULL, y = NULL, ...)
move_dz(chart, x = NULL, y = NULL, ...)

relocDataRange(chart, x = NULL, y = NULL, ...)
move_datarange(chart, x = NULL, y = NULL, ...)
move_dr(chart, x = NULL, y = NULL, ...)

relocTimeline(chart, x = NULL, y = NULL, x2 = NULL, y2 = NULL, ...)
move_timeline(chart, x = NULL, y = NULL, x2 = NULL, y2 = NULL, ...)
move_tl(chart, x = NULL, y = NULL, x2 = NULL, y2 = NULL, ...)

relocToolbox(chart, x = NULL, y = NULL, ...)
move_toolbox(chart, x = NULL, y = NULL, ...)
move_tb(chart, x = NULL, y = NULL, ...)

relocRoam(chart, x = NULL, y = NULL, ...)
move_roam(chart, x = NULL, y = NULL, ...)
move_rc(chart, x = NULL, y = NULL, ...)
Arg Requirement

chart

Echarts object generated by echartR or echart.

x

x coordinate of the left upper point of the plot area. Default 80px.

y

y coordinate of the left upper point of the plot area. Default 60px.

x2

x coordinate of the right lower point of the plot area. Default 80px.

y2

y coordinate of the right lower point of the plot area. Default 60px.

width

Width of the plot area. Default NULL (automatically configured).

height

Height of the plot area. Default NULL (automatically configured).

bgColor

background color of plot area. Default transparent (‘rgba(0,0,0,0)’).

borderColor

border color of the plot area. Default ‘#ccc’.

borderWidth

border width of the plot area. Default 0px (not shown).

widget

Widget name to set. Could be c(‘pane’, ‘timeline’, ‘legend’, ‘title’, ‘dataZoom’, ‘dataRange’, ‘toolbox’, ‘roamController’).

  • pane: the area pane, takes in all the parameters
  • timeline: timeline widget, only use x, y, x2, y2
  • legend, title, dataZoom, dataRange, toolbox, roamController: other widgets, only use x, y

…

Elipsis.

3 Showcase

3.1 Data Preparation

Let’s use airquality to generate an Echarts objects g:

library(data.table)
aq1 <- melt(airquality, id=c('Month', 'Day'), measure=c('Temp', 'Wind'), 
            variable='Param')
g <- echartr(aq1, Day, value, Param, t=Month, type='curve') %>% 
    setToolbox(pos=3) %>% setTitle('Temp & Wind') %>% setDataZoom() %>% 
    setDataRange()
g

3.2 Modification

width and height in setGrid are different from those in setTheme. setGrid only takes effect in the pane.

g %>% setGrid(width=300, height=200)

We want to enlarge the grid a little bit. So we need to relocate some of the widgets and finally change the grid using setGrid.

Then relocate the widgets accordingly. The easiest way to relocate the widget is using pos argument in set[Widgets] function.

g1 <- g %>% setTitle(pos=12)
g1

Now we can push timeline and dataZoom down to the bottom. Since dataRange only supports x and y, what if we want to put it in the bottom and stick to y2? The Echarts object has already been assigned a randomized elementId as metadata. We can use a JavaScript expression document.getElementById(<elementId>).offsetHeight to refer to the canvas height in a dynamic manner. No matter how we resize the canvas window, the widget will be always at the correct position.

g2 <- g1
g2$elementId <- "chart2"
g2 <- g2 %>% relocDataZoom(x=120, y=JS(paste0(
    "document.getElementById('", g2$elementId, "').offsetHeight-30")))
g2

timeline supports x2 and y2. So we can directly set its y2 25. Thus, we exchaned the position of timeline and dataZoom.

g3 <- g2 %>% relocTimeline(y2=25, x=120, x2=50)
g3$elementId <- "chart3"
g3

Finally let’s enlarge the pane grid.

g4 <- g3 %>% setGrid(x=120, y=40, x2=50, y2=90)
g4$elementId <- "chart4"
g4