knitr::opts_chunk$set( collapse = TRUE, comment = "#>" ) library(echarts4r)
This document details some more advanced usage of the echarts4r
package.
You can set two common options with e_common
:
e_common( font_family = "Raleway", theme = NULL )
All charts on this page will use the Raleway
font (sourced in CSS from Google fonts).
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.
iris |> group_by(Species) |> e_charts(Sepal.Length, timeline = TRUE) |> e_line(Sepal.Width) |> e_title("Timeline")
df <- data.frame( x = LETTERS[1:10], a = runif(10), b = runif(10), c = runif(10), d = runif(10) ) df |> e_charts(x) |> e_bar(a, stack = "grp") |> e_bar(b, stack = "grp") |> e_bar(c, stack = "grp2") |> e_bar(d, stack = "grp2")
Since 0.2.0
the e_scatter
and e_effect_scatter
functions take a different, much improved scale
argument which is a scaling function.
iris |> group_by(Species) |> e_charts(Sepal.Length) |> e_scatter(Petal.Length, Sepal.Width)
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
.
iris |> group_by(Species) |> e_charts(Sepal.Length) |> e_scatter(Petal.Length, symbol_size = 15)
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.
Since version 0.2.1
you can jitter points with e_scatter
.
mtcars |> e_charts(cyl) |> e_scatter(drat, symbol_size = 4) |> e_scatter( drat, jitter_factor = 2, symbol_size = 6, name = "noisy" )
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() 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.
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)
USArrests |> e_charts(Assault) |> e_line(Murder, smooth = TRUE) |> e_line(Rape, y_index = 1) |> # add secondary axis e_y_axis(splitLine = list(show = FALSE)) # hide split lines on first Y axis
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 axis
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 more arguments, with echarts4r
you are often only one argument away from from what you want.
library(dplyr) 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:
df |> e_charts() |> e_tree(layout = "radial")
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()
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)
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.
e_common( font_family = "Raleway" )
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.