Starting with ApexCharts

Victor Perrier

2020-06-23

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, data manipulation will be done with the dplyr package.

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

Bar charts

Simple bar charts can be created with:

data("mpg")
n_manufac <- count(mpg, manufacturer)

apex(data = n_manufac, type = "column", mapping = aes(x = manufacturer, y = n))
audiaudichevroletchevroletdodgedodgefordfordhondahondahyundaihyundaijeepjeepland roverland roverlincolnlincolnmercurymercurynissannissanpontiacpontiacsubarusubarutoyotatoyotavolkswagenvolkswagen4536271890
Download SVG
Download PNG
Download CSV

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

apex(data = n_manufac, type = "bar", mapping = aes(x = manufacturer, y = n))
audichevroletdodgefordhondahyundaijeepland roverlincolnmercurynissanpontiacsubarutoyotavolkswagen45453636272718189900
Download SVG
Download PNG
Download CSV

To create a dodge bar charts, use aesthetic fill :

n_manufac_year <- count(mpg, manufacturer, year)

apex(data = n_manufac_year, type = "column", mapping = aes(x = manufacturer, y = n, fill = year))
1999
2008
audiaudichevroletchevroletdodgedodgefordfordhondahondahyundaihyundaijeepjeepland roverland roverlincolnlincolnmercurymercurynissannissanpontiacpontiacsubarusubarutoyotatoyotavolkswagenvolkswagen2520151050
Download SVG
Download PNG
Download CSV

For stacked bar charts, specify option stacked in ax_chart :

apex(data = n_manufac_year, type = "column", mapping = aes(x = manufacturer, y = n, fill = year)) %>% 
  ax_chart(stacked = TRUE)
1999
2008
audiaudichevroletchevroletdodgedodgefordfordhondahondahyundaihyundaijeepjeepland roverland roverlincolnlincolnmercurymercurynissannissanpontiacpontiacsubarusubarutoyotatoyotavolkswagenvolkswagen4536271890
Download SVG
Download PNG
Download CSV

Line charts

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

data("economics")
economics <- tail(economics, 100)

apex(data = economics, type = "line", mapping = aes(x = date, y = uempmed))
20072007200820082009200920102010201120112012201220132013201420142015201528.0024.0020.0016.0012.008.004.00
Download SVG
Download PNG
Download CSV

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

data("economics_long")
economics_long <- economics_long %>% 
  group_by(variable) %>% 
  slice((n()-100):n())

apex(data = economics_long, type = "line", mapping = aes(x = date, y = value01, group = variable)) %>% 
  ax_yaxis(decimalsInFloat = 2) # number of decimals to keep
pce
pop
psavert
uempmed
unemploy
20082008200920092010201020112011201220122013201320142014201520151.191.000.810.620.440.250.06
Download SVG
Download PNG
Download CSV

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)
pce
pop
psavert
uempmed
unemploy
20082008200920092010201020112011201220122013201320142014201520154.003.002.001.000.00
Download SVG
Download PNG
Download CSV

Scatter charts

Simple bar charts can be created with:

apex(data = mtcars, type = "scatter", mapping = aes(x = wt, y = mpg))
1.01.02.02.03.03.04.04.05.05.06.06.035.00032.50030.00027.50025.00022.50020.00017.50015.00012.50010.000
Download SVG
Download PNG
Download CSV

Color points according to a third variable:

apex(data = mtcars, type = "scatter", mapping = aes(x = wt, y = mpg, fill = cyl))
6
4
8
1.01.02.02.03.03.04.04.05.05.06.06.035.00032.50030.00027.50025.00022.50020.00017.50015.00012.50010.000
Download SVG
Download PNG

And change point size using z aesthetics:

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

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))
Yes
No
51.6%48.4%

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))
My value65%

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))
Mazda RX4Mazda RX4 WagDatsun 710Hornet 4 DriveHornet SportaboutValiant2520151050
Download SVG
Download PNG
Download CSV

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))
drat
wt
Mazda RX4Mazda RX4 WagDatsun 710Hornet 4 DriveHornet SportaboutValiant43210
Download SVG
Download PNG
Download CSV

Heatmap

Create heatmap with :

txhousing2 <- txhousing %>% 
  filter(city %in% head(unique(city)), year %in% c(2000, 2001)) %>% 
  rename(val_med = median)

apex(
  data = txhousing2,
  type = "heatmap", 
  mapping = aes(x = date, y = city, fill = scales::rescale(val_med))
) %>% 
  ax_dataLabels(enabled = FALSE) %>% 
  ax_colors("#008FFB")
20002000200120012001200120022002BeaumontBay AreaAustinArlingtonAmarilloAbilene
Download SVG
Download PNG
Download CSV

Candlestick

Create a candlestick chart with:

apex(
  candles, 
  aes(x = datetime, open = open, close = close, low = low, high = high),
  type = "candlestick"
)
23:0023:0003:0003:0006:0006:0009:0009:0012:0012:0015:0015:0018:0018:0021:0021:0007 Oct07 Oct03:0003:006660.006640.006620.006600.006580.006560.00
Download SVG
Download PNG
Download CSV