Version 5

There are a number of new features brought by version 5 of echarts.js, not all are showcased here, see the official changelog for more information.

Dark mode

Darkmode helps when using dark backgrounds, it’ll automatically re-color labels, grid lines, legend text, etc.

library(echarts4r)

e_charts(mtcars, qsec, darkMode = TRUE) |> 
  e_scatter(mpg, wt) |> 
  e_labels() |> 
  e_color(background = "black")

Aria Decal

Decal provides a new visual type that does not only augment aria scenarios but also enrich visual effects.

df <- data.frame(
  x = rep(letters, 2),
  y = round(runif(52, 20, 50)),
  grp = rep(c("A", "B"), each = 26)
)

df |> 
  group_by(grp) |> 
  e_charts(x) |> 
  e_bar(y) |> 
  e_aria(enabled = TRUE, decal = list(show = TRUE))

Rounded Corners

head(df, 7) |> 
  e_charts(x) |> 
  e_pie(
    y,
    radius = c("40%", "70%"),
    itemStyle = list(
      borderRadius = 20,
      borderColor = '#fff',
      borderWidth = 2
    )
  )

Datazoom Enhancements

Visual improvements to the datazoom feature.

e_charts(mtcars, qsec) |> 
  e_scatter(mpg, wt) |>
  e_datazoom(startValue = 14)

Labels

Many improvements to labels were added.

mtcars |>
  tibble::rownames_to_column("model") |> 
  e_charts(model) |> 
  e_bar(
    mpg,
    label = list(
      formatter = '{c} {name|{a}}',
      show = TRUE,
      rotate = 90,
      align = "left",
      verticalAlign = "middle",
      position = "insideBottom",
      rich = list(name = list())
    )
  )

There are also new options such as labelLine and labelLayout.

e_charts(mtcars, mpg) |> 
  e_scatter(
    qsec,
    wt,
    label = list(
      show = TRUE
    ),
    labelLayout = list(
      x = "95%",
      moveOverlap = "shiftY"
    ),
    labelLine = list(
      show = TRUE,
      lineStyle = list(
        color = "gray"
      )
    ),
    emphasis = list(
      focus = "self"
    )
  ) |> 
  e_x_axis(min = 9)

Emphasis

More control on emphasis which was previously rarely if ever useful.

df <- data.frame(
  grp = rep(c("a", "b"), each = 7),
  x = rep(letters[1:7], 2),
  y = runif(14, 1, 10)
)

df |> 
  group_by(grp) |> 
  e_charts(x) |> 
  e_bar(y, emphasis = list(focus = "series"))

SVG Map

url <- "https://echarts.apache.org/examples/data/asset/geo/Beef_cuts_France.svg"

svg <- url |> 
  readLines() |> 
  paste0(collapse = "")

## Warning in readLines(url): incomplete final line found on
## 'https://echarts.apache.org/examples/data/asset/geo/Beef_cuts_France.svg'

data <- tibble::tibble(
  name = c(
    "Queue", 
    "Langue",
    "Plat de joue",
    "Collier",
    "Rumsteck",
    "Plat de joue",
    "Onglet",
    "Plat de tranche",
    "Araignée",
    "Gîte à la noix",
    "Bavette d'aloyau",
    "Tende de tranche",
    "Rond de gîte",
    "Plat de côtes",
    "Bavette",
    "Basses côtes",
    "Jumeau à biftek",
    "Jumeau à pot-au-feu",
    "Paleron",
    "Macreuse à bifteck",
    "Macreuse à pot-au-feu",
    "Tendron Milieu de poitrine",
    "Flanchet",
    "Bavettede de flanchet",
    "Hampe",
    "Filet",
    "Aiguillette baronne",
    "Côtes Entrecôtes",
    "Faux-filet",
    "Gîte",
    "Gros bout de poitrine"
  ),
  value = runif(31, 10, 15)
)

data |> 
  e_charts(name) |> 
  e_svg_register("beef", svg) |> 
  e_svg(
    value,
    map = "beef",
    label = list(
      show = FALSE
    )
  ) |> 
  e_visual_map(
    value,
    orient = "horizontal"
  )