Starting with ApexCharts

Victor Perrier

2022-02-27

The objective of this vignette is to show how to quickly build data visualizations with the ApexCharts JavaScript library, as well as to give an overview of the different graphics available.

Data used are from ggplot2 package.

library(ggplot2)
library(scales)
library(apexcharter)

Bar charts

Simple bar charts can be created with:

data("mpg")

apex(data = mpg, type = "column", mapping = aes(x = manufacturer))

Flipping coordinates can be done by using type = "bar":

apex(data = mpg, type = "bar", mapping = aes(x = manufacturer))

To create a dodge bar charts, use aesthetic fill :

apex(data = mpg, type = "column", mapping = aes(x = manufacturer, fill = year))

For stacked bar charts, specify option stacked in ax_chart :

apex(data = mpg, type = "column", mapping = aes(x = manufacturer, fill = year)) %>% 
  ax_chart(stacked = TRUE)

Line charts

Simple line charts can be created with (works with character, Date or POSIXct):

data("economics")

apex(data = economics, type = "line", mapping = aes(x = date, y = uempmed))

To represent several lines, use a data.frame in long format and the group aesthetic:

data("economics_long")

apex(data = economics_long, type = "line", mapping = aes(x = date, y = value01, group = variable)) %>% 
  ax_yaxis(decimalsInFloat = 2) # number of decimals to keep

Create area charts with type = "area":

apex(data = economics_long, type = "area", mapping = aes(x = date, y = value01, fill = variable)) %>% 
  ax_yaxis(decimalsInFloat = 2) %>% # number of decimals to keep
  ax_chart(stacked = TRUE) %>%
  ax_yaxis(max = 4, tickAmount = 4)

Scatter charts

Simple bar charts can be created with:

apex(data = mtcars, type = "scatter", mapping = aes(x = wt, y = mpg))

Color points according to a third variable:

apex(data = mtcars, type = "scatter", mapping = aes(x = wt, y = mpg, fill = cyl))

And change point size using z aesthetics:

apex(data = mtcars, type = "scatter", mapping = aes(x = wt, y = mpg, z = scales::rescale(qsec)))

Pie charts

Simple pie charts can be created with:

poll <- data.frame(
  answer = c("Yes", "No"),
  n = c(254, 238)
)

apex(data = poll, type = "pie", mapping = aes(x = answer, y = n))

Radial charts

Simple radial charts can be created with (here we pass values directly in aes, but you can use a data.frame) :

apex(data = NULL, type = "radialBar", mapping = aes(x = "My value", y = 65))

Multi radial chart (more than one value):

fruits <- data.frame(
  name = c('Apples', 'Oranges', 'Bananas', 'Berries'),
  value = c(44, 55, 67, 83)
)

apex(data = fruits, type = "radialBar", mapping = aes(x = name, y = value))

Radar charts

Simple radar charts can be created with:

mtcars$model <- rownames(mtcars)

apex(data = head(mtcars), type = "radar", mapping = aes(x = model, y = qsec))

With a grouping variable:

# extremely complicated reshaping
new_mtcars <- reshape(
  data = head(mtcars), 
  idvar = "model", 
  varying = list(c("drat", "wt")),
  times = c("drat", "wt"),
  direction = "long",
  v.names = "value",
  drop = c("mpg", "cyl", "hp", "dist", "qsec", "vs", "am", "gear", "carb")
)

apex(data = new_mtcars, type = "radar", mapping = aes(x = model, y = value, group = time))

Polar area

With some custom options for color mapping:

apex(mtcars, aes(rownames(mtcars), mpg), type = "polarArea") %>% 
  ax_legend(show = FALSE) %>% 
  ax_colors(col_numeric("Blues", domain = NULL)(mtcars$mpg)) %>% 
  ax_fill(opacity = 1) %>% 
  ax_stroke(width = 0) %>% 
  ax_tooltip(fillSeriesColor = FALSE)

Heatmap

Create a heatmap with :

# create some data
sales <- expand.grid(year = 2010:2020, month = month.name)
sales$value <- sample(-10:30, nrow(sales), TRUE)

apex(
  data = sales,
  type = "heatmap", 
  mapping = aes(x = year, y = month, fill = value)
) %>% 
  ax_dataLabels(enabled = FALSE) %>% 
  ax_colors("#008FFB")

Treemap

Create a treemap with:

data("mpg", package = "ggplot2")

apex(mpg, aes(x = manufacturer), "treemap")

Candlestick

Create a candlestick chart with:

data("candles", package = "apexcharter")

apex(
  candles, 
  aes(x = datetime, open = open, close = close, low = low, high = high),
  type = "candlestick"
)