Line
Basic Line Chart
https://echarts.apache.org/examples/en/editor.html?c=line-simple
Smoothed line chart
https://echarts.apache.org/examples/en/editor.html?c=line-smooth
Basic area chart
https://echarts.apache.org/examples/en/editor.html?c=area-basic
Stacked Line Chart
https://echarts.apache.org/examples/en/editor.html?c=line-stack
data <- tibble::tibble(
Day = c("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"),
Email = c(120, 132, 101, 134, 90, 230, 210),
`Union Ads` = c(220, 182, 191, 234, 290, 330, 310),
`Video Ads` = c(150, 232, 201, 154, 190, 330, 410),
`Direct` = c(320, 332, 301, 334, 390, 330, 320),
`Search Engine` = c(820, 932, 901, 934, 1290, 1330, 1320),
)
# Convert wide data to tidy data (https://r4ds.had.co.nz/tidy-data.html)
data <- data |>
tidyr::pivot_longer(Email:`Search Engine`)
echartr(option = list(
title = list(text = "Stacked Line"),
tooltip = list(trigger = "axis"),
legend = list(data = unique(data$name)),
grid = list(left = "3%", right = "4%", bottom = "3%", containLabel = TRUE),
toolbox = list(
feature = list(saveAsImage = list())
),
xAxis = list(
type = "category",
boundaryGap = FALSE
),
yAxis = list(type = "value"),
series = ec_line(
data, Day, value,
name = name,
stack = "Total"
)
))Stacked Area Chart
https://echarts.apache.org/examples/en/editor.html?c=area-stack
data <- tibble::tibble(
Day = c("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"),
Email = c(120, 132, 101, 134, 90, 230, 210),
`Union Ads` = c(220, 182, 191, 234, 290, 330, 310),
`Video Ads` = c(150, 232, 201, 154, 190, 330, 410),
`Direct` = c(320, 332, 301, 334, 390, 330, 320),
`Search Engine` = c(820, 932, 901, 934, 1290, 1330, 1320),
)
# Convert wide data to tidy data (https://r4ds.had.co.nz/tidy-data.html)
data <- data |>
tidyr::pivot_longer(Email:`Search Engine`)
echartr(option = list(
title = list(text = "Stacked Area Chart"),
tooltip = list(
trigger = "axis",
axisPointer = list(
type = "cross",
label = list(
backgroundColor = "#6a7985"
)
)
),
legend = list(data = unique(data$name)),
toolbox = list(
feature = list(saveAsImage = list())
),
grid = list(left = "3%", right = "4%", bottom = "3%", containLabel = TRUE),
xAxis = list(
type = "category",
boundaryGap = FALSE
),
yAxis = list(type = "value"),
series = ec_line(
data, Day, value,
name = name,
areaStyle = list(),
emphasis = list(focus = "series"),
stack = "Total",
label = if (name == "Search Engine") list(show = TRUE, position = "top") else list()
)
))Bar
Axis Align with Tick
https://echarts.apache.org/examples/en/editor.html?c=bar-tick-align
data <- tibble::tibble(
x = c("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"),
y = c(10, 52, 200, 334, 390, 330, 220)
)
echartr(option = list(
tooltip = list(
trigger = "axis", axisPointer = list(type = "shadow")
),
grid = list(
left = "3%", right = "4%", bottom = "3%", containLabel = TRUE
),
xAxis = list(
type = "category",
axisTick = list(alignWithLabel = TRUE)
),
yAxis = list(type = "value"),
series = ec_bar(data, x, y, name = "Direct", barWidth = "60%"),
axisPointer = list(
type = "shadow"
)
))Bar with Background
https://echarts.apache.org/examples/en/editor.html?c=bar-background
data <- tibble::tibble(
x = c("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"),
y = c(120, 200, 150, 80, 70, 110, 130)
)
echartr(option = list(
xAxis = list(type = "category"),
yAxis = list(type = "value"),
series = ec_bar(data, x, y, showBackground = TRUE, backgroundStyle = list(
color = "rgba(220, 220, 220, 0.8)" # TODO: Handle grDevices::rgb
))
))Bar Label Rotation
https://echarts.apache.org/examples/en/editor.html?c=bar-label-rotation
label_option <- list(
show = TRUE,
formatter = "{c} {name|{a}}",
rich = "name: {}",
rotate = 90, # 0 - 90
align = "left", # "left", "right", "center"
verticalAlign = "middle", # "top", "middle", "bottom"
position = "insideBottom", # "inside", "insideTop", "insideBottom", "insideLeft",
# "insideRight", "insideTopLeft", "insideTopRight",
# "insideBottomLeft", "insideBottomRight"
# "outside", "outsideTop", "outsideBottom", "outsideLeft",
distance = 15
)
data <- tibble::tibble(
year = c("2012", "2013", "2014", "2015", "2016"),
Forest = c(320, 332, 301, 334, 390),
Steppe = c(220, 182, 191, 234, 290),
Desert = c(150, 232, 201, 154, 190),
Wetland = c(98, 77, 101, 99, 40)
)
# Convert wide data to tidy data (https://r4ds.had.co.nz/tidy-data.html)
data <- data |>
tidyr::pivot_longer(Forest:Wetland)
echartr(option = list(
tooltip = list(trigger = "axis", axisPointer = list(type = "shadow")),
legend = list(show = TRUE),
toolbox = list(
show = TRUE,
orient = "vertical",
left = "right",
top = "center",
feature = list(
mark = list(show = TRUE),
dataView = list(show = TRUE, readOnly = FALSE),
magicType = list(show = TRUE, type = c("line", "bar")),
restore = list(show = TRUE),
saveAsImage = list(show = TRUE)
)
),
xAxis = list(type = "category"),
yAxis = list(type = "value"),
series = ec_bar(
data,
label = label_option,
year, value,
name = name,
barGap = 0L
)
))Pie
Doughnut Chart
https://echarts.apache.org/examples/en/editor.html?c=pie-doughnut
data <- tibble::tibble(
name = c("Search Engine", "Direct", "Email", "Union Ads", "Video Ads"),
value = c(1048, 735, 580, 484, 300)
)
echartr(option = list(
tooltip = list(trigger = "item"),
legend = list(top = "5%", left = "center"),
series = ec_pie(data,
value,
name = "Access From",
data = list(name = name),
radius = list("40%", "70%"),
avoidLabelOverlap = FALSE,
label = list(show = FALSE, position = "center"),
emphasis = list(label = list(
show = TRUE,
fontSize = 40,
fontWeight = "bold"
)),
labelLine = list(show = FALSE)
)
))Calendar pie
https://echarts.apache.org/examples/en/editor.html?c=pie-calendar
cell_size <- c(80, 80)
pie_radius <- 30
data <- tibble::tibble(
Work = floor(runif(28, 0, 25)),
Entertainment = floor(runif(28, 0, 25)),
Sleep = floor(runif(28, 0, 25)),
index = 1:28,
date = as.character(seq(as.Date("2017-02-01"), as.Date("2017-02-28"), by = "day"))
)
# Convert wide data to tidy data (https://r4ds.had.co.nz/tidy-data.html)
data <- data |>
tidyr::pivot_longer(Work:Sleep)
echartr(option = list(
tooltip = list(),
legend = list(
data = unique(data$name),
bottom = "20"
),
calendar = list(
top = "middle", left = "center", orient = "vertical",
cellSize = cell_size,
yearLabel = list(
show = FALSE, fontSize = 30
),
dayLabel = list(
margin = 20, firstDay = 1,
nameMap = c("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")
),
monthLabel = list(show = FALSE),
range = c("2017-02")
),
series = c(
ec_scatter(data,
date,
id = "label",
coordinateSystem = "calendar",
symbolSize = 0,
label = list(
show = TRUE,
offset = c(-cell_size[[1]] / 2 + 10, -cell_size[[2]] / 2 + 10),
formatter = htmlwidgets::JS(
"function(params) {
var date = Date.parse(params.value);
return echarts.time.format(date, '{dd}', false);
}"
)
)
),
ec_pie(data,
value,
id = paste0("pie-", index),
center = date,
coordinateSystem = "calendar",
radius = pie_radius,
label = list(formatter = "{c}", position = "inside")
)
)
))