Chartist animation

Chartist.js for R, powered by htmlwidgets. Github repo is here: https://github.com/yutannihilation/chartist

devtools::install_github("yutannihilation/chartist@animationSpike")

Sample data:

library(chartist)

set.seed(324)
data <- data.frame(
  day = paste0("day", 1:20),
  A   = runif(10, 0, 20),
  B   = runif(10, 0, 20),
  C   = runif(10, 0, 20),
  D   = runif(10, 0, 20),
  E   = runif(10, 0, 20),
  stringsAsFactors = FALSE
)

Now you can add animation like this.

chartist(data, day) +
  Point() +
  SVG_animate(target = "point", offset = -100, style = "x1")

offset is not literally a offset when you specify "opacity" as style; offset is used for the initial value.

chartist(data, day) +
  SVG_animate(target = "line", offset = 0, style = "opacity")

For other targets, you can use offset as the initial value by adding relative = FALSE. (As you noticed, the offset value does not represents the axis value, which needs to be fixed…)

chartist(data, day) +
  Point() +
  SVG_animate(target = "point", offset = 0, relative = FALSE, style = "x1")

If you want to animate things sequentially, you can use delay parameter. dur is the duration of the animation.

chartist(data, day) +
  SVG_animate(target = "line", style = "opacity", offset = 0, delay = 300, dur = 1500)

You can even overlay animations.

chartist(data, day) + 
  Point() +
  SVG_animate(target = "point", style = "x1", offset = -100, delay = 5) +
  SVG_animate(target = "point", style = "y1", offset = 100, delay = 3) +
  SVG_animate(target = "point", style = "opacity", offset = 0, delay = 5)

(Bar() and Pie() charts are not included here, since yet I don’t know the proper parameters for those, except for opacity.)