This document details some more advanced usage of the
echarts4r package.
Common options
You can set two common options with e_common:
- Font family
- Theme
e_common(
font_family = "Raleway",
theme = NULL
)All charts on this page will use the Raleway font
(sourced in CSS from Google fonts).
Grouping
The package also understands dplyr::group_by in order to
avoid having to add many layers manually one by one.
echarts4r essentially will plot one serie for each
group.
iris |>
group_by(Species) |>
e_charts(Sepal.Length) |>
e_line(Sepal.Width) |>
e_title("Grouped data")The above plot one line (e_line) for each group
(group_by). At one exception, since
0.2.1, when timeline is set to
TRUE when the chart is initialised with
e_charts. In the latter case each group is used as a step
of the timeline.
Scatter
Since 0.2.0 the e_scatter and
e_effect_scatter functions take a different, much improved
scale argument which is a scaling function.
The default scaling function is e_scale which rescales
from 1 to 20, but you can pass your own. The scaling function should
take a vector of integer or numeric and return
a similar vector of the same length. For instance, to create a function
that rescales from 5 to 30:
my_scale <- function(x){
scales::rescale(x, to = c(5, 30))
}
iris |>
group_by(Species) |>
e_charts(Sepal.Length) |>
e_scatter(Petal.Length, Sepal.Width, scale = my_scale)This also works with R 4.1.0 syntax.
iris |>
group_by(Species) |>
e_charts(Sepal.Length) |>
e_scatter(
Petal.Length,
Sepal.Width,
scale = \(x) scales::rescale(x, to = c(5, 30))
)When size is not passed the size of the points are
defined by symbol_size.
When size is passed symbol_size becomes a
multiplier executed after the scaling function is run. For instance
\(\log(1+x)*5\)
iris |>
group_by(Species) |>
e_charts(Sepal.Length) |>
e_scatter(Petal.Length, Sepal.Width, scale = log1p, symbol_size = 10)This behaviour was added as it is important to be able to scale points within a reasonable range, ideally points are between 1 and 30~40 in size.
Note that rescaling the color means you should also rescale the
e_visual_map, if used.
echart <- mtcars |>
e_charts(mpg) |>
e_scatter(qsec, wt, scale = e_scale) |>
e_legend(show = FALSE)
echart |>
e_visual_map(wt, scale = e_scale)
# or
# echart |>
# e_visual_map(min = 1, max = 20)If you want to keep the original size then you can use
scale_js, because you might want the
e_visual_map to remain true to the original data.
mtcars |>
e_charts(mpg) |>
e_scatter(qsec, wt, scale = NULL, scale_js = "function(data){ return data[3] * 3;}") |>
e_legend(show = FALSE) |>
e_visual_map(wt, scale = NULL)This way the bubbles are of an appropriate size but the the range of the visual map remains true.
coord_system
Chart types are not only applicable to the standard 2D cartesian
coordinate system, though most charts will default to the
cartesian2d coordinate system, they may be applied to
others.
Let’s look at the heatmap. First a regular heatmap.
v <- LETTERS[1:10]
matrix <- data.frame(
x = sample(v, 300, replace = TRUE),
y = sample(v, 300, replace = TRUE),
z = rnorm(300, 10, 1),
stringsAsFactors = FALSE
) |>
dplyr::group_by(x, y) |>
dplyr::summarise(z = sum(z)) |>
dplyr::ungroup()
#> `summarise()` has grouped output by 'x'. You can override using the `.groups`
#> argument.
matrix |>
e_charts(x) |>
e_heatmap(y, z) |>
e_visual_map(z)One could also plot the heatmap on different coordinates, such as a
calendar by first adding a calendar with e_calendar then
specifying coord_system = "calendar".
dates <- seq.Date(as.Date("2018-01-01"), as.Date("2018-12-31"), by = "day")
values <- rnorm(length(dates), 20, 6)
year <- data.frame(date = dates, values = values)
year |>
e_charts(date) |>
e_calendar(range = "2018") |>
e_heatmap(values, coord_system = "calendar") |>
e_visual_map(max = 30)Another example, using polar coordinates, plot a line on 2D cartesian coordinates, then change to polar.
df <- data.frame(x = 1:10, y = seq(1, 20, by = 2))
df |>
e_charts(x) |>
e_line(y)
df |>
e_charts(x) |>
e_polar() |>
e_angle_axis() |>
e_radius_axis() |>
e_line(y, coord_system = "polar", smooth = TRUE) There are numerous coordinate system available in
echarts4r; globe, cartesian3d and
polar to name a few. Note that when there
are more than one coord_system available the latter are
documented with examples in their respective function’s man
page.
Customise the Axis
Use multiple axis, by speecifying the index of the axis. Note
that JavaScript starts from 0 not 1, so y_index = 1 is the
second axis, y_index = 0 is the first axis
(default)
Flip coordinates
You can flip coordinates with e_flip_coords, note that
it will not work if you have multiple y axis.
data.frame(
x = LETTERS[1:5],
y = runif(5, 1, 15)
) |>
e_charts(x) |>
e_bar(y, name = "flipped") |>
e_flip_coords() # flip axisMark Points and Lines
Highlight points and lines on your plot with the e_mark
family of functions.
USArrests |>
tibble::rownames_to_column("State") |>
dplyr::mutate(
Rape = -Rape
) |>
e_charts(State) |>
e_area(Murder) |>
e_bar(Rape, name = "Sick basterd", x_index = 1) |> # second y axis
e_mark_line("Sick basterd", data = list(type = "average")) |>
e_mark_point("Murder", data = list(type = "min"))Look for arguments
Look for more arguments, with echarts4r you are often
only one argument away from from what you want.
library(dplyr)
#>
#> Attaching package: 'dplyr'
#> The following objects are masked from 'package:stats':
#>
#> filter, lag
#> The following objects are masked from 'package:base':
#>
#> intersect, setdiff, setequal, union
df <- tibble(
name = "earth", # 1st level
children = list(
tibble(name = c("land", "ocean"), # 2nd level
children = list(
tibble(name = c("forest", "river")), # 3rd level
tibble(name = c("fish", "kelp"),
children = list(
tibble(name = c("shark", "tuna"), # 4th level
NULL # kelp
))
)
))
)
)
df |>
e_charts() |>
e_tree()to radial:
Show labels
You can, for most series show labels like so:
USArrests |>
tibble::rownames_to_column("State") |>
dplyr::slice(1:10) |>
e_charts(State) |>
e_area(Murder, label = list(normal = list(show = TRUE))) There is also a helper function that provides an easier API
USArrests |>
tibble::rownames_to_column("State") |>
dplyr::slice(1:10) |>
e_charts(State) |>
e_area(Murder) |>
e_labels()Nested data
You might observe in the official documentation that some series can take more data points than just x and y points, like e_bar; In the official documentation go to “serie”, select the one you are interested in (i.e.: bar) then select “data”.
e_bar lets you pass serie (from your
initial data.frame) which corresponds to value in the original
library. However the latter also takes, label,
itemStyle, and tooltip but being JSON arrays
they translate to lists in R and dealing with nested data.frames is not
ideal. e_add_nested remedies to that. It allows adding
those nested data points.
Let’s add some columns to the iris dataset which we will
use in e_add_nested to customize the appearance of the label.
# add columns to iris
iris_dat <- iris |>
dplyr::mutate(
show = TRUE, # to show the labels
fontSize = exp(Sepal.Length) / 10, # font size will correspond to Sepal.Length
color = sample(c("red", "black", "blue"), dplyr::n(), replace = TRUE) # assign a random color to the label
)
iris_dat |>
dplyr::slice(1:10) |> # simplify the graph.
e_charts(Sepal.Width) |>
e_line(Sepal.Length) |>
e_add_nested("label", show, fontSize, color) |> # add our columns to "label"
e_x_axis(min = 2.5)Another example with e_funnel.
funnel <- data.frame(
stage = c("View", "Click", "Purchase"),
value = c(80, 30, 20),
color = c("blue", "red", "green")
)
funnel |>
e_charts() |>
e_funnel(value, stage) |>
e_add_nested("itemStyle", color)List
Since version 0.2.1 you can pass a raw list of
options.
N <- 20 # data points
opts <- list(
xAxis = list(
type = "category",
data = LETTERS[1:N]
),
yAxis = list(
type = "value"
),
series = list(
list(
type = "line",
data = round(runif(N, 5, 20))
)
)
)
e_charts() |>
e_list(opts)e_list can also be used to append options.