knitr::opts_chunk$set( collapse = TRUE, comment = "#>" ) library(echarts4r) e_common( font_family = "Raleway" )
echarts4r
comes with a highly customisable grid and axis, but admittedly they take some getting used to.
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 against ceslius.
df <- data.frame( x = 1:20, # celsius y = runif(20, 1, 100) # percentages ) df |> e_charts(x) |> e_line(y) |> e_format_x_axis(suffix = "°C") |> e_legend(FALSE)
Since version 0.2.1
you can also easily format the axis to decimal, percentages or currencies thanks to contribution from Artem Klevtsov.
df |> dplyr::mutate(y = y / 100) |> e_charts(x) |> e_line(y, legend = FALSE) |> e_x_axis( formatter = e_axis_formatter("currency", currency = "GBP") ) |> e_y_axis( formatter = e_axis_formatter("decimal", digits = 3) )
You can also customise the grid to have, for instance, multiple plots on one canvas.
Let's initialise a basic plot.
df <- data.frame( x = 1:20, w = runif(20, 1, 100), z = runif(20, 25, 75) ) df |> e_charts(x) |> e_line(w) |> e_line(z)
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 x
and 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
.
e_line
) are plotted against axis (e_axis
)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)
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
You can also mess with the axis to completely change your chart. For instance, from a regular bar chart:
df <- data.frame( x = LETTERS[1:10], y = seq(1, 20, by = 2), z = runif(10, 5, 20) ) df |> e_charts(x) |> e_bar(y)
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")
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.