echarts4r comes with a highly customisable grid and axis, but admittedly they take some getting used to.

Axis helper

You can customise the axis with e_axis, e_x_axis or e_y_axis, you can see the official documentation for more details. There is also a helper function, e_format_axis and its sisters e_format_x_axis and e_format_y_axis. The latter lets you easily add suffix or prefix to your axis labels.

Say you want to plot percentages against ceslius.

df <- data.frame(
  x = 1:20, # celsius
  y = runif(20, 1, 100) # percentages
)

df %>% 
  e_charts(x) %>% 
  e_line(y) %>% 
  e_format_y_axis(suffix = "%") %>% 
  e_format_x_axis(suffix = "°C") %>% 
  e_legend(FALSE)

Grid

You can also customise the grid to have, for instance, multiple plots on one canvas.

Let’s initialise a basic plot.

Now say we don’t want w and z on the same plot. We could of course make two entirely different plots (2 plots initialised with e_charts()), but it would be cleaner to have them on the same canvas, a bit like ggplot2 facets.

First two plots on the same canvas means multiple axis, so we’ll plot each serie on its own axis.

echarts4r is an R API to a JavaScript library, so arrays start at one; x and y indices default to 0 so we only need to change one of the series’ indices to 1. Therefore one serie is plotted on index 0 and the other on index 1 for two xand y axis.

df %>% 
  e_charts(x) %>% 
  e_line(w) %>% 
  e_line(z, x_index = 1, y_index = 1)

Notice how echarts4r puts the additional axis on the top and right of the plot. This is a useful feature but not what we want; we’re missing a split grid.

We use e_grid twice for two grids, we define the height of each; 35% is ideal for stacked grids, you need some margin for the legend, the axis, etc. hence not using 50%.

df %>% 
  e_charts(x) %>% 
  e_line(w) %>% 
  e_line(z, x_index = 1, y_index = 1) %>% 
  e_grid(height = "35%") %>% # two grids of 35% height
  e_grid(height = "35%", top = "50%") # this grid is 50% from the top

However, we still have both line plots on the same grid. Here is how to think about grids and axis in echarts4r.

  1. Your series (i.e.: e_line) are plotted against axis (e_axis)
  2. These axis are plotted in grids e_grid

So we have two grids and two axis but the axis are both plotted on the same grid(point #2 above). So we need to move our two additional axis to another grid. Note that grid indices also start at 0 here.

df %>% 
  e_charts(x) %>% 
  e_line(w) %>% 
  e_line(z, x_index = 1, y_index = 1) %>% 
  e_grid(height = "35%") %>% 
  e_grid(height = "35%", top = "50%") %>% 
  e_y_axis(gridIndex = 1) %>% # put x and y on grid index 1
  e_x_axis(gridIndex = 1)

There you go!

You can also have a different grid to put the plots side by side.

df %>% 
  e_charts(x) %>% 
  e_line(w) %>% 
  e_line(z, x_index = 1, y_index = 1) %>% 
  e_grid(width = "35%") %>% 
  e_grid(width = "35%", left = "55%") %>% 
  e_y_axis(gridIndex = 1) %>% # put x and y on grid index 1
  e_x_axis(gridIndex = 1)

Why bother?

Well now those charts can share interactions.

df %>% 
  e_charts(x) %>% 
  e_line(w) %>% 
  e_line(z, x_index = 1, y_index = 1) %>% 
  e_grid(height = "35%") %>% 
  e_grid(height = "35%", top = "50%") %>% 
  e_y_axis(gridIndex = 1) %>% 
  e_x_axis(gridIndex = 1) %>% 
  e_tooltip(trigger = "axis") %>% 
  e_datazoom(x_index = c(0, 1)) # add data zoom for for x axis

Axis

You can also mess with the axis to completely change your chart. For instance, from a regular bar chart:

to a polar chart.

df %>% 
  e_charts(x) %>% 
  e_polar() %>% 
  e_angle_axis(x) %>% # angle = x
  e_radius_axis() %>% 
  e_bar(y, coord_system = "polar")

or a radial chart one.

df %>% 
  e_charts(x) %>% 
  e_polar() %>% 
  e_angle_axis() %>% 
  e_radius_axis(x) %>% # radius = x 
  e_bar(y, coord_system = "polar")

This will also work with other chart types.

df %>% 
  e_charts(x) %>% 
  e_polar() %>% 
  e_angle_axis() %>% 
  e_radius_axis(x) %>% 
  e_line(y, coord_system = "polar") %>% 
  e_scatter(z, coord_system = "polar")