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.

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")