From 2cf992961299f6280d36f1fcf742834fae2e0a65 Mon Sep 17 00:00:00 2001 From: pvictor Date: Mon, 24 Jun 2019 15:18:38 +0200 Subject: [PATCH] added examples --- R/apex-options.R | 29 ++- R/apex-utils.R | 442 ++++++++++++++++++++++++++++++++- R/apex.R | 37 +++ inst/examples/examples-unhcr.R | 8 +- man/apex.Rd | 38 +++ man/ax_annotations.Rd | 98 ++++++++ man/ax_chart.Rd | 25 ++ man/ax_colors.Rd | 19 ++ man/ax_dataLabels.Rd | 11 + man/ax_fill.Rd | 35 +++ man/ax_grid.Rd | 31 +++ man/ax_labels.Rd | 12 + man/ax_legend.Rd | 38 ++- man/ax_markers.Rd | 11 + man/ax_plotOptions.Rd | 35 +++ man/ax_responsive.Rd | 27 ++ man/ax_states.Rd | 18 ++ man/ax_stroke.Rd | 23 ++ man/ax_subtitle.Rd | 14 ++ man/ax_title.Rd | 11 + man/ax_tooltip.Rd | 29 +++ man/ax_yaxis.Rd | 11 + man/bar_opts.Rd | 2 +- man/radialBar_opts.Rd | 26 ++ 24 files changed, 1007 insertions(+), 23 deletions(-) diff --git a/R/apex-options.R b/R/apex-options.R index 6027572..856be88 100644 --- a/R/apex-options.R +++ b/R/apex-options.R @@ -68,7 +68,7 @@ events_opts <- function(click = NULL, #' Use these options in \code{\link{ax_plotOptions}}. #' #' @param horizontal Logical. This option will turn a column chart into a horiontal bar chart. -#' @param endingShape Available Options: \code{"flat"}, \code{"rounded"} or \code{"arrow"}. +#' @param endingShape Available Options: \code{"flat"} or \code{"rounded"}. #' @param columnWidth In column charts, columnWidth is the percentage of the available width in the grid-rect. #' @param barHeight In horizontal bar charts, barHeight is the percentage of the available height in the grid-rect. #' @param distributed Logical. Turn this option to make the bars discrete. Each value indicates one bar per series. @@ -152,7 +152,32 @@ heatmap_opts <- function(radius = NULL, #' @note See \url{https://apexcharts.com/docs/options/plotoptions/radialbar/}. #' #' @export -#' +#' +#' @examples +#' apexchart() %>% +#' ax_chart(type = "radialBar") %>% +#' ax_plotOptions( +#' radialBar = radialBar_opts( +#' startAngle = -135, +#' endAngle = 135, +#' dataLabels = list( +#' name = list( +#' fontSize = "16px", +#' # color = undefined, +#' offsetY = 120 +#' ), +#' value = list( +#' offsetY = 76, +#' fontSize = "22px", +#' # color = undefined, +#' formatter = htmlwidgets::JS("function (val) {return val + '%';}") +#' ) +#' ) +#' ) +#' ) %>% +#' ax_stroke(dashArray = 4) %>% +#' ax_series(70) %>% +#' ax_labels("Indicator") radialBar_opts <- function(size = NULL, inverseOrder = NULL, startAngle = NULL, diff --git a/R/apex-utils.R b/R/apex-utils.R index 74f5b92..1ef38ff 100644 --- a/R/apex-utils.R +++ b/R/apex-utils.R @@ -19,7 +19,104 @@ #' #' @return A \code{apexcharts} \code{htmlwidget} object. #' @export -#' +#' +#' @examples +#' data("economics", package = "ggplot2") +#' +#' # Horizontal line +#' apex( +#' data = tail(economics, 200), +#' mapping = aes(x = date, y = uempmed), +#' type = "line" +#' ) %>% +#' ax_annotations( +#' yaxis = list(list( +#' y = 11.897, +#' borderColor = "firebrick", +#' opacity = 1, +#' label = list( +#' text = "Mean uempmed", +#' position = "left", +#' textAnchor = "start" +#' ) +#' )) +#' ) +#' +#' +#' # Vertical line +#' apex( +#' data = tail(economics, 200), +#' mapping = aes(x = date, y = uempmed), +#' type = "line" +#' ) %>% +#' ax_annotations( +#' xaxis = list(list( +#' x = htmlwidgets::JS("new Date('1 Mar 2007').getTime()"), +#' strokeDashArray = 0, +#' borderColor = "#775DD0", +#' label = list( +#' text = "A label", +#' borderColor = "#775DD0", +#' style = list( +#' color = "#fff", +#' background = "#775DD0" +#' ) +#' ) +#' )) +#' ) +#' +#' +#' # Vertical range +#' apex( +#' data = tail(economics, 200), +#' mapping = aes(x = date, y = uempmed), +#' type = "line" +#' ) %>% +#' ax_annotations( +#' xaxis = list(list( +#' x = htmlwidgets::JS("new Date('1 Jan 2009').getTime()"), +#' x2 = htmlwidgets::JS("new Date('1 Feb 2010').getTime()"), +#' fillColor = "#B3F7CA", +#' opacity = 0.4, +#' label = list( +#' text = "A label", +#' borderColor = "#B3F7CA", +#' style = list( +#' color = "#fff", +#' background = "#B3F7CA" +#' ) +#' ) +#' )) +#' ) +#' +#' +#' # Point annotation +#' apex( +#' data = tail(economics, 200), +#' mapping = aes(x = date, y = uempmed), +#' type = "line" +#' ) %>% +#' ax_annotations( +#' points = list(list( +#' x = htmlwidgets::JS("new Date('1 Jun 2010').getTime()"), +#' y = 25.2, +#' marker = list( +#' size = 8, +#' fillColor = "#fff", +#' strokeColor = "red", +#' radius = 2 +#' ), +#' label = list( +#' text = "Highest", +#' offsetY = 0, +#' borderColor = "#FF4560", +#' style = list( +#' color = "#fff", +#' background = "#FF4560" +#' ) +#' ) +#' )) +#' ) ax_annotations <- function(ax, position = NULL, yaxis = NULL, @@ -55,7 +152,31 @@ ax_annotations <- function(ax, #' #' @return A \code{apexcharts} \code{htmlwidget} object. #' @export -#' +#' +#' @examples +#' library(dplyr) +#' data("diamonds", package = "ggplot2") +#' +#' # Stack bar type +#' apex( +#' data = count(diamonds, cut, color), +#' mapping = aes(x = cut, y = n, fill = color) +#' ) %>% +#' ax_chart(stacked = TRUE) +#' +#' apex( +#' data = count(diamonds, cut, color), +#' mapping = aes(x = cut, y = n, fill = color) +#' ) %>% +#' ax_chart(stacked = TRUE, stackType = "100%") +#' +#' +#' # Toolbar +#' apex( +#' data = count(diamonds, cut, color), +#' mapping = aes(x = cut, y = n, fill = color) +#' ) %>% +#' ax_chart(toolbar = list(show = FALSE)) ax_chart <- function(ax, type = NULL, stacked = NULL, @@ -90,7 +211,41 @@ ax_chart <- function(ax, #' #' @return A \code{apexcharts} \code{htmlwidget} object. #' @export -#' +#' +#' @examples +#' library(dplyr) +#' data("diamonds", package = "ggplot2") +#' +#' # Stack bar type +#' apex( +#' data = count(diamonds, cut), +#' mapping = aes(x = cut, y = n) +#' ) %>% +#' ax_plotOptions( +#' bar = bar_opts(endingShape = "rounded", columnWidth = "10%") +#' ) +#' +#' # Pie +#' apex( +#' data = count(diamonds, cut), +#' mapping = aes(x = cut, y = n), +#' type = "pie" +#' ) %>% +#' ax_plotOptions( +#' pie = pie_opts(customScale = 0.5) +#' ) +#' +#' +#' # Radial +#' apexchart() %>% +#' ax_chart(type = "radialBar") %>% +#' ax_plotOptions( +#' radialBar = radialBar_opts( +#' hollow = list(size = "70%") +#' ) +#' ) %>% +#' ax_series(70) %>% +#' ax_labels("Indicator") ax_plotOptions <- function(ax, bar = NULL, heatmap = NULL, @@ -111,7 +266,25 @@ ax_plotOptions <- function(ax, #' @export #' #' @note See \url{https://apexcharts.com/docs/options/colors/} -#' +#' +#' @examples +#' +#' library(dplyr) +#' data("diamonds", package = "ggplot2") +#' +#' # Change default color(s) +#' apex( +#' data = count(diamonds, cut), +#' mapping = aes(x = cut, y = n) +#' ) %>% +#' ax_colors("#F7D358") +#' +#' +#' apex( +#' data = count(diamonds, cut, color), +#' mapping = aes(x = cut, y = n, fill = color) +#' ) %>% +#' ax_colors(scales::brewer_pal(palette = "Set2")(7)) ax_colors <- function(ax, ...) { args <- list(...) if (length(args) == 1) { @@ -138,7 +311,17 @@ ax_colors <- function(ax, ...) { #' @export #' #' @note See \url{https://apexcharts.com/docs/options/datalabels/} -#' +#' +#' @examples +#' library(dplyr) +#' data("diamonds", package = "ggplot2") +#' +#' # Add data labels +#' apex( +#' data = count(diamonds, cut), +#' mapping = aes(x = cut, y = n) +#' ) %>% +#' ax_dataLabels(enabled = TRUE) ax_dataLabels <- function(ax, enabled = NULL, textAnchor = NULL, @@ -169,7 +352,41 @@ ax_dataLabels <- function(ax, #' @export #' #' @note See \url{https://apexcharts.com/docs/options/fill/} -#' +#' +#' @examples +#' library(dplyr) +#' data("diamonds", package = "ggplot2") +#' +#' # Use a pattern to fill bars +#' apex( +#' data = count(diamonds, cut, color), +#' mapping = aes(x = color, y = n, fill = cut) +#' ) %>% +#' ax_fill( +#' type = "pattern", +#' opacity = 1, +#' pattern = list( +#' style = c("circles", "slantedLines", "verticalLines", "horizontalLines", "squares") +#' ) +#' ) +#' +#' +#' data("economics", package = "ggplot2") +#' +#' # Customise gradient +#' apex( +#' data = economics, +#' mapping = aes(x = date, y = psavert), +#' type = "area" +#' ) %>% +#' ax_fill(gradient = list( +#' enabled = TRUE, +#' shadeIntensity = 1, +#' inverseColors = FALSE, +#' opacityFrom = 0, +#' opacityTo = 1, +#' stops = c(0, 2000) +#' )) ax_fill <- function(ax, type = NULL, colors = NULL, @@ -202,6 +419,36 @@ ax_fill <- function(ax, #' #' @note See \url{https://apexcharts.com/docs/options/grid/} #' +#' @examples +#' library(dplyr) +#' data("mpg", package = "ggplot2") +#' +#' # Hide Y-axis and gridelines +#' apex( +#' data = count(mpg, manufacturer), +#' mapping = aes(x = manufacturer, y = n) +#' ) %>% +#' ax_grid(show = FALSE) +#' +#' # just grid lines +#' apex( +#' data = count(mpg, manufacturer), +#' mapping = aes(x = manufacturer, y = n) +#' ) %>% +#' ax_grid(yaxis = list(lines = list(show = FALSE))) +#' +#' +#' # both x & y +#' data("economics", package = "ggplot2") +#' apex( +#' data = economics, +#' mapping = aes(x = date, y = psavert), +#' type = "line" +#' ) %>% +#' ax_grid( +#' yaxis = list(lines = list(show = TRUE)), +#' xaxis = list(lines = list(show = TRUE)) +#' ) ax_grid <- function(ax, show = NULL, borderColor = NULL, @@ -231,6 +478,18 @@ ax_grid <- function(ax, #' @name ax_labels #' #' @note See \url{https://apexcharts.com/docs/options/labels/} +#' +#' @examples +#' apexchart() %>% +#' ax_chart(type = "pie") %>% +#' ax_series(23, 45, 56) %>% +#' ax_labels("A", "B", "C") +#' +#' # same as +#' apexchart() %>% +#' ax_chart(type = "pie") %>% +#' ax_series2(c(23, 45, 56)) %>% +#' ax_labels2(c("A", "B", "C")) ax_labels <- function(ax, ...) { .ax_opt(ax, "labels", ...) } @@ -247,8 +506,10 @@ ax_labels2 <- function(ax, labels) { #' @param ax A \code{apexcharts} \code{htmlwidget} object. #' @param show Logical. Whether to show or hide the legend container. #' @param position Available position options for legend: \code{"top"}, \code{"right"}, \code{"bottom"}, \code{"left"}. +#' @param showForSingleSeries Show legend even if there is just 1 series. +#' @param showForNullSeries Allows you to hide a particular legend if it’s series contains all null values. +#' @param showForZeroSeries Allows you to hide a particular legend if it’s series contains all 0 values. #' @param horizontalAlign Available options for horizontal alignment: \code{"right"}, \code{"center"}, \code{"left"}. -#' @param verticalAlign Available options for vertical alignment: \code{"top"}, \code{"middle"}, \code{"bottom"} #' @param fontSize Sets the fontSize of legend text elements #' @param textAnchor The alignment of text relative to legend’s drawing position #' @param offsetY Sets the top offset for legend container. @@ -272,11 +533,31 @@ ax_labels2 <- function(ax, labels) { #' @export #' #' @note See \url{https://apexcharts.com/docs/options/legend/} +#' +#' @examples +#' library(dplyr) +#' data("mpg", package = "ggplot2") +#' +#' # Legend position +#' apex( +#' data = count(mpg, manufacturer, year), +#' mapping = aes(x = manufacturer, y = n, fill = year) +#' ) %>% +#' ax_legend(position = "right") +#' +#' # hide legend +#' apex( +#' data = count(mpg, manufacturer, year), +#' mapping = aes(x = manufacturer, y = n, fill = year) +#' ) %>% +#' ax_legend(show = FALSE) ax_legend <- function(ax, show = NULL, position = NULL, + showForSingleSeries = NULL, + showForNullSeries= NULL, + showForZeroSeries = NULL, horizontalAlign = NULL, - verticalAlign = NULL, fontSize = NULL, textAnchor = NULL, offsetY = NULL, @@ -316,6 +597,16 @@ ax_legend <- function(ax, #' #' @note See \url{https://apexcharts.com/docs/options/markers/} #' +#' @examples +#' data("economics", package = "ggplot2") +#' +#' # show points +#' apex( +#' data = tail(economics, 20), +#' type = "line", +#' mapping = aes(x = date, y = uempmed) +#' ) %>% +#' ax_markers(size = 6) ax_markers <- function(ax, size = NULL, colors = NULL, @@ -333,7 +624,7 @@ ax_markers <- function(ax, .ax_opt2(ax, "markers", l = dropNulls(params)) } -# + #' No data specification #' #' @param ax A \code{apexcharts} \code{htmlwidget} object. @@ -370,6 +661,33 @@ ax_noData <- function(ax, #' @export #' #' @note See \url{https://apexcharts.com/docs/options/responsive/} +#' +#' @examples +#' library(dplyr) +#' data("mpg", package = "ggplot2") +#' +#' # Open in browser and resize window +#' apex( +#' data = count(mpg, manufacturer, year), +#' mapping = aes(x = manufacturer, y = n, fill = year), +#' type = "bar" +#' ) %>% +#' ax_legend(position = "right") %>% +#' ax_responsive( +#' list( +#' breakpoint = 1000, +#' options = list( +#' plotOptions = list( +#' bar = list( +#' horizontal = FALSE +#' ) +#' ), +#' legend = list( +#' position = "bottom" +#' ) +#' ) +#' ) +#' ) ax_responsive <- function(ax, ...) { .ax_opt(ax, "responsive", ...) } @@ -430,6 +748,24 @@ ax_series2 <- function(ax, l) { #' @export #' #' @note See \url{https://apexcharts.com/docs/options/states/} +#' +#' @examples +#' library(dplyr) +#' data("mpg", package = "ggplot2") +#' +#' # Inverse effect on hover +#' apex( +#' data = count(mpg, manufacturer), +#' mapping = aes(x = manufacturer, y = n), +#' type = "bar" +#' ) %>% +#' ax_states( +#' hover = list( +#' filter = list( +#' type = "darken" +#' ) +#' ) +#' ) ax_states <- function(ax, normal = NULL, hover = NULL, @@ -456,6 +792,17 @@ ax_states <- function(ax, #' @export #' #' @note See \url{https://apexcharts.com/docs/options/title/} +#' +#' @examples +#' data("economics", package = "ggplot2") +#' apex( +#' data = economics, +#' mapping = aes(x = date, y = uempmed), +#' type = "line" +#' ) %>% +#' ax_title( +#' text = "Median duration of unemployment, in weeks" +#' ) ax_title <- function(ax, text = NULL, align = NULL, @@ -486,6 +833,20 @@ ax_title <- function(ax, #' @export #' #' @note See \url{https://apexcharts.com/docs/options/subtitle/} +#' +#' @examples +#' data("economics", package = "ggplot2") +#' apex( +#' data = economics, +#' mapping = aes(x = date, y = uempmed), +#' type = "line" +#' ) %>% +#' ax_title( +#' text = "Median duration of unemployment" +#' ) %>% +#' ax_subtitle( +#' text = "in weeks" +#' ) ax_subtitle <- function(ax, text = NULL, align = NULL, @@ -520,6 +881,29 @@ ax_subtitle <- function(ax, #' @export #' #' @note See \url{https://apexcharts.com/docs/options/stroke/} +#' +#' @examples +#' data("economics", package = "ggplot2") +#' apex( +#' data = economics, +#' mapping = aes(x = date, y = uempmed), +#' type = "line" +#' ) %>% +#' ax_stroke( +#' width = 1, +#' dashArray = 4 +#' ) +#' +#' data("economics_long", package = "ggplot2") +#' apex( +#' data = economics_long, +#' mapping = aes(x = date, y = value01, group = variable), +#' type = "line" +#' ) %>% +#' ax_stroke( +#' width = c(1, 2, 3, 4, 5), +#' dashArray = c(1, 2, 3, 4, 5) +#' ) ax_stroke <- function(ax, show = NULL, curve = NULL, @@ -557,6 +941,35 @@ ax_stroke <- function(ax, #' @export #' #' @note See \url{https://apexcharts.com/docs/options/tooltip/} +#' +#' @examples +#' library(dplyr) +#' data("mpg", package = "ggplot2") +#' +#' # Hide tooltip +#' apex( +#' data = count(mpg, manufacturer, year), +#' mapping = aes(x = manufacturer, y = n, fill = year) +#' ) %>% +#' ax_tooltip(enabled = FALSE) +#' +#' # Share between series +#' apex( +#' data = count(mpg, manufacturer, year), +#' mapping = aes(x = manufacturer, y = n, fill = year) +#' ) %>% +#' ax_tooltip(shared = TRUE) +#' +#' # Fixed tooltip +#' data("economics", package = "ggplot2") +#' apex( +#' data = economics, +#' mapping = aes(x = date, y = psavert), +#' type = "line" +#' ) %>% +#' ax_tooltip( +#' fixed = list(enabled = TRUE, position = "topLeft") +#' ) ax_tooltip <- function(ax, enabled = NULL, shared = NULL, @@ -646,6 +1059,17 @@ ax_xaxis <- function(ax, #' @export #' #' @note See \url{https://apexcharts.com/docs/options/yaxis/} +#' +#' @examples +#' data("economics_long", package = "ggplot2") +#' apex( +#' data = economics_long, +#' mapping = aes(x = date, y = value01, group = variable), +#' type = "line" +#' ) %>% +#' ax_yaxis( +#' decimalsInFloat = 2, title = list(text = "Rescaled to [0,1]") +#' ) ax_yaxis <- function(ax, opposite = NULL, tickAmount = NULL, diff --git a/R/apex.R b/R/apex.R index 5c484cb..ece75db 100644 --- a/R/apex.R +++ b/R/apex.R @@ -16,6 +16,43 @@ #' @importFrom rlang eval_tidy as_label #' @importFrom utils modifyList #' +#' @examples +#' library(dplyr) +#' +#' +#' # make a barchart with a frequency table +#' data("mpg", package = "ggplot2") +#' apex( +#' data = count(mpg, manufacturer), +#' mapping = aes(x = manufacturer, y = n), +#' type = "bar" +#' ) +#' +#' # timeseries +#' data("economics", package = "ggplot2") +#' apex( +#' data = economics, +#' mapping = aes(x = date, y = uempmed), +#' type = "line" +#' ) +#' +#' # you can add option to apex result : +#' apex( +#' data = economics, +#' mapping = aes(x = date, y = uempmed), +#' type = "line" +#' ) %>% +#' ax_stroke(width = 1) +#' +#' +#' +#' # with group variable +#' data("economics_long", package = "ggplot2") +#' apex( +#' data = economics_long, +#' mapping = aes(x = date, y = value01, group = variable), +#' type = "line" +#' ) apex <- function(data, mapping, type = "column", ..., auto_update = TRUE, width = NULL, height = NULL, elementId = NULL) { type <- match.arg(type, c("column", "bar", "line", "area", "spline", "area-spline", "pie", "donut", "radialBar", "radar", "scatter", "heatmap")) diff --git a/inst/examples/examples-unhcr.R b/inst/examples/examples-unhcr.R index 19fff87..b8b33c7 100644 --- a/inst/examples/examples-unhcr.R +++ b/inst/examples/examples-unhcr.R @@ -30,9 +30,9 @@ head(unhcr_popstats_2017) categories_unhcr <- count(unhcr_popstats_2017, population_type, sort = TRUE) -apexcharter() %>% +apexchart() %>% ax_chart(type = "bar") %>% - ax_plotOptions(bar = barOpts( + ax_plotOptions(bar = bar_opts( horizontal = TRUE, dataLabels = list( position = "center" @@ -67,7 +67,7 @@ refugees <- unhcr_popstats_2017 %>% ) -apexcharter() %>% +apexchart() %>% ax_chart(type = "bar", stacked = FALSE) %>% ax_dataLabels(enabled = FALSE) %>% ax_series( @@ -115,7 +115,7 @@ apexcharter() %>% count(unhcr_popstats_2017, continent = continent_residence, population_type, wt = value) -apexcharter() %>% +apexchart() %>% ax_chart(type = "bar", stacked = TRUE, stackType = "100%") %>% ax_plotOptions(bar = barOpts(horizontal = TRUE)) %>% ax_series( diff --git a/man/apex.Rd b/man/apex.Rd index 63e1b9f..9648ad2 100644 --- a/man/apex.Rd +++ b/man/apex.Rd @@ -28,3 +28,41 @@ apex(data, mapping, type = "column", ..., auto_update = TRUE, \description{ Quick Apex Chart } +\examples{ +library(dplyr) + + +# make a barchart with a frequency table +data("mpg", package = "ggplot2") +apex( + data = count(mpg, manufacturer), + mapping = aes(x = manufacturer, y = n), + type = "bar" +) + +# timeseries +data("economics", package = "ggplot2") +apex( + data = economics, + mapping = aes(x = date, y = uempmed), + type = "line" +) + +# you can add option to apex result : +apex( + data = economics, + mapping = aes(x = date, y = uempmed), + type = "line" +) \%>\% + ax_stroke(width = 1) + + + +# with group variable +data("economics_long", package = "ggplot2") +apex( + data = economics_long, + mapping = aes(x = date, y = value01, group = variable), + type = "line" +) +} diff --git a/man/ax_annotations.Rd b/man/ax_annotations.Rd index 8cc4479..a1cfcdb 100644 --- a/man/ax_annotations.Rd +++ b/man/ax_annotations.Rd @@ -29,3 +29,101 @@ Annotations properties \note{ See \url{https://apexcharts.com/docs/options/annotations/}. } +\examples{ +data("economics", package = "ggplot2") + +# Horizontal line +apex( + data = tail(economics, 200), + mapping = aes(x = date, y = uempmed), + type = "line" +) \%>\% + ax_annotations( + yaxis = list(list( + y = 11.897, + borderColor = "firebrick", + opacity = 1, + label = list( + text = "Mean uempmed", + position = "left", + textAnchor = "start" + ) + )) + ) + + +# Vertical line +apex( + data = tail(economics, 200), + mapping = aes(x = date, y = uempmed), + type = "line" +) \%>\% + ax_annotations( + xaxis = list(list( + x = htmlwidgets::JS("new Date('1 Mar 2007').getTime()"), + strokeDashArray = 0, + borderColor = "#775DD0", + label = list( + text = "A label", + borderColor = "#775DD0", + style = list( + color = "#fff", + background = "#775DD0" + ) + ) + )) + ) + + +# Vertical range +apex( + data = tail(economics, 200), + mapping = aes(x = date, y = uempmed), + type = "line" +) \%>\% + ax_annotations( + xaxis = list(list( + x = htmlwidgets::JS("new Date('1 Jan 2009').getTime()"), + x2 = htmlwidgets::JS("new Date('1 Feb 2010').getTime()"), + fillColor = "#B3F7CA", + opacity = 0.4, + label = list( + text = "A label", + borderColor = "#B3F7CA", + style = list( + color = "#fff", + background = "#B3F7CA" + ) + ) + )) + ) + + +# Point annotation +apex( + data = tail(economics, 200), + mapping = aes(x = date, y = uempmed), + type = "line" +) \%>\% + ax_annotations( + points = list(list( + x = htmlwidgets::JS("new Date('1 Jun 2010').getTime()"), + y = 25.2, + marker = list( + size = 8, + fillColor = "#fff", + strokeColor = "red", + radius = 2 + ), + label = list( + text = "Highest", + offsetY = 0, + borderColor = "#FF4560", + style = list( + color = "#fff", + background = "#FF4560" + ) + ) + )) + ) +} diff --git a/man/ax_chart.Rd b/man/ax_chart.Rd index 160a011..92f287f 100644 --- a/man/ax_chart.Rd +++ b/man/ax_chart.Rd @@ -54,3 +54,28 @@ A \code{apexcharts} \code{htmlwidget} object. \description{ Chart parameters } +\examples{ +library(dplyr) +data("diamonds", package = "ggplot2") + +# Stack bar type +apex( + data = count(diamonds, cut, color), + mapping = aes(x = cut, y = n, fill = color) +) \%>\% + ax_chart(stacked = TRUE) + +apex( + data = count(diamonds, cut, color), + mapping = aes(x = cut, y = n, fill = color) +) \%>\% + ax_chart(stacked = TRUE, stackType = "100\%") + + +# Toolbar +apex( + data = count(diamonds, cut, color), + mapping = aes(x = cut, y = n, fill = color) +) \%>\% + ax_chart(toolbar = list(show = FALSE)) +} diff --git a/man/ax_colors.Rd b/man/ax_colors.Rd index 9e83fac..8bcaa1a 100644 --- a/man/ax_colors.Rd +++ b/man/ax_colors.Rd @@ -20,3 +20,22 @@ Colors \note{ See \url{https://apexcharts.com/docs/options/colors/} } +\examples{ + +library(dplyr) +data("diamonds", package = "ggplot2") + +# Change default color(s) +apex( + data = count(diamonds, cut), + mapping = aes(x = cut, y = n) +) \%>\% + ax_colors("#F7D358") + + +apex( + data = count(diamonds, cut, color), + mapping = aes(x = cut, y = n, fill = color) +) \%>\% + ax_colors(scales::brewer_pal(palette = "Set2")(7)) +} diff --git a/man/ax_dataLabels.Rd b/man/ax_dataLabels.Rd index 81f126b..ffe17d8 100644 --- a/man/ax_dataLabels.Rd +++ b/man/ax_dataLabels.Rd @@ -37,3 +37,14 @@ Labels on data \note{ See \url{https://apexcharts.com/docs/options/datalabels/} } +\examples{ +library(dplyr) +data("diamonds", package = "ggplot2") + +# Add data labels +apex( + data = count(diamonds, cut), + mapping = aes(x = cut, y = n) +) \%>\% + ax_dataLabels(enabled = TRUE) +} diff --git a/man/ax_fill.Rd b/man/ax_fill.Rd index 3008cbc..73277ea 100644 --- a/man/ax_fill.Rd +++ b/man/ax_fill.Rd @@ -34,3 +34,38 @@ Fill property \note{ See \url{https://apexcharts.com/docs/options/fill/} } +\examples{ +library(dplyr) +data("diamonds", package = "ggplot2") + +# Use a pattern to fill bars +apex( + data = count(diamonds, cut, color), + mapping = aes(x = color, y = n, fill = cut) +) \%>\% + ax_fill( + type = "pattern", + opacity = 1, + pattern = list( + style = c("circles", "slantedLines", "verticalLines", "horizontalLines", "squares") + ) + ) + + +data("economics", package = "ggplot2") + +# Customise gradient +apex( + data = economics, + mapping = aes(x = date, y = psavert), + type = "area" +) \%>\% + ax_fill(gradient = list( + enabled = TRUE, + shadeIntensity = 1, + inverseColors = FALSE, + opacityFrom = 0, + opacityTo = 1, + stops = c(0, 2000) + )) +} diff --git a/man/ax_grid.Rd b/man/ax_grid.Rd index 7151ae2..befa6b7 100644 --- a/man/ax_grid.Rd +++ b/man/ax_grid.Rd @@ -40,3 +40,34 @@ Add grids on chart \note{ See \url{https://apexcharts.com/docs/options/grid/} } +\examples{ +library(dplyr) +data("mpg", package = "ggplot2") + +# Hide Y-axis and gridelines +apex( + data = count(mpg, manufacturer), + mapping = aes(x = manufacturer, y = n) +) \%>\% + ax_grid(show = FALSE) + +# just grid lines +apex( + data = count(mpg, manufacturer), + mapping = aes(x = manufacturer, y = n) +) \%>\% + ax_grid(yaxis = list(lines = list(show = FALSE))) + + +# both x & y +data("economics", package = "ggplot2") +apex( + data = economics, + mapping = aes(x = date, y = psavert), + type = "line" +) \%>\% + ax_grid( + yaxis = list(lines = list(show = TRUE)), + xaxis = list(lines = list(show = TRUE)) + ) +} diff --git a/man/ax_labels.Rd b/man/ax_labels.Rd index 3790025..e1e635e 100644 --- a/man/ax_labels.Rd +++ b/man/ax_labels.Rd @@ -26,3 +26,15 @@ Alternative axis labels \note{ See \url{https://apexcharts.com/docs/options/labels/} } +\examples{ +apexchart() \%>\% + ax_chart(type = "pie") \%>\% + ax_series(23, 45, 56) \%>\% + ax_labels("A", "B", "C") + +# same as +apexchart() \%>\% + ax_chart(type = "pie") \%>\% + ax_series2(c(23, 45, 56)) \%>\% + ax_labels2(c("A", "B", "C")) +} diff --git a/man/ax_legend.Rd b/man/ax_legend.Rd index d40f55f..d73c629 100644 --- a/man/ax_legend.Rd +++ b/man/ax_legend.Rd @@ -4,11 +4,13 @@ \alias{ax_legend} \title{Legend properties} \usage{ -ax_legend(ax, show = NULL, position = NULL, horizontalAlign = NULL, - verticalAlign = NULL, fontSize = NULL, textAnchor = NULL, - offsetY = NULL, offsetX = NULL, formatter = NULL, labels = NULL, - markers = NULL, itemMargin = NULL, containerMargin = NULL, - onItemClick = NULL, onItemHover = NULL, floating = NULL, ...) +ax_legend(ax, show = NULL, position = NULL, + showForSingleSeries = NULL, showForNullSeries = NULL, + showForZeroSeries = NULL, horizontalAlign = NULL, fontSize = NULL, + textAnchor = NULL, offsetY = NULL, offsetX = NULL, + formatter = NULL, labels = NULL, markers = NULL, + itemMargin = NULL, containerMargin = NULL, onItemClick = NULL, + onItemHover = NULL, floating = NULL, ...) } \arguments{ \item{ax}{A \code{apexcharts} \code{htmlwidget} object.} @@ -17,9 +19,13 @@ ax_legend(ax, show = NULL, position = NULL, horizontalAlign = NULL, \item{position}{Available position options for legend: \code{"top"}, \code{"right"}, \code{"bottom"}, \code{"left"}.} -\item{horizontalAlign}{Available options for horizontal alignment: \code{"right"}, \code{"center"}, \code{"left"}.} +\item{showForSingleSeries}{Show legend even if there is just 1 series.} -\item{verticalAlign}{Available options for vertical alignment: \code{"top"}, \code{"middle"}, \code{"bottom"}} +\item{showForNullSeries}{Allows you to hide a particular legend if it’s series contains all null values.} + +\item{showForZeroSeries}{Allows you to hide a particular legend if it’s series contains all 0 values.} + +\item{horizontalAlign}{Available options for horizontal alignment: \code{"right"}, \code{"center"}, \code{"left"}.} \item{fontSize}{Sets the fontSize of legend text elements} @@ -61,3 +67,21 @@ Legend properties \note{ See \url{https://apexcharts.com/docs/options/legend/} } +\examples{ +library(dplyr) +data("mpg", package = "ggplot2") + +# Legend position +apex( + data = count(mpg, manufacturer, year), + mapping = aes(x = manufacturer, y = n, fill = year) +) \%>\% + ax_legend(position = "right") + +# hide legend +apex( + data = count(mpg, manufacturer, year), + mapping = aes(x = manufacturer, y = n, fill = year) +) \%>\% + ax_legend(show = FALSE) +} diff --git a/man/ax_markers.Rd b/man/ax_markers.Rd index 38cb203..c4f4162 100644 --- a/man/ax_markers.Rd +++ b/man/ax_markers.Rd @@ -45,3 +45,14 @@ Markers properties \note{ See \url{https://apexcharts.com/docs/options/markers/} } +\examples{ +data("economics", package = "ggplot2") + +# show points +apex( + data = tail(economics, 20), + type = "line", + mapping = aes(x = date, y = uempmed) +) \%>\% + ax_markers(size = 6) +} diff --git a/man/ax_plotOptions.Rd b/man/ax_plotOptions.Rd index 597d3ef..e5e6b9b 100644 --- a/man/ax_plotOptions.Rd +++ b/man/ax_plotOptions.Rd @@ -26,3 +26,38 @@ A \code{apexcharts} \code{htmlwidget} object. \description{ Specific options for chart } +\examples{ +library(dplyr) +data("diamonds", package = "ggplot2") + +# Stack bar type +apex( + data = count(diamonds, cut), + mapping = aes(x = cut, y = n) +) \%>\% + ax_plotOptions( + bar = bar_opts(endingShape = "rounded", columnWidth = "10\%") + ) + +# Pie +apex( + data = count(diamonds, cut), + mapping = aes(x = cut, y = n), + type = "pie" +) \%>\% + ax_plotOptions( + pie = pie_opts(customScale = 0.5) + ) + + +# Radial +apexchart() \%>\% + ax_chart(type = "radialBar") \%>\% + ax_plotOptions( + radialBar = radialBar_opts( + hollow = list(size = "70\%") + ) + ) \%>\% + ax_series(70) \%>\% + ax_labels("Indicator") +} diff --git a/man/ax_responsive.Rd b/man/ax_responsive.Rd index 6e535f1..7b2a5bd 100644 --- a/man/ax_responsive.Rd +++ b/man/ax_responsive.Rd @@ -20,3 +20,30 @@ Responsive options \note{ See \url{https://apexcharts.com/docs/options/responsive/} } +\examples{ +library(dplyr) +data("mpg", package = "ggplot2") + +# Open in browser and resize window +apex( + data = count(mpg, manufacturer, year), + mapping = aes(x = manufacturer, y = n, fill = year), + type = "bar" +) \%>\% + ax_legend(position = "right") \%>\% + ax_responsive( + list( + breakpoint = 1000, + options = list( + plotOptions = list( + bar = list( + horizontal = FALSE + ) + ), + legend = list( + position = "bottom" + ) + ) + ) + ) +} diff --git a/man/ax_states.Rd b/man/ax_states.Rd index f741755..911a65c 100644 --- a/man/ax_states.Rd +++ b/man/ax_states.Rd @@ -26,3 +26,21 @@ Charts' states \note{ See \url{https://apexcharts.com/docs/options/states/} } +\examples{ +library(dplyr) +data("mpg", package = "ggplot2") + +# Inverse effect on hover +apex( + data = count(mpg, manufacturer), + mapping = aes(x = manufacturer, y = n), + type = "bar" +) \%>\% + ax_states( + hover = list( + filter = list( + type = "darken" + ) + ) + ) +} diff --git a/man/ax_stroke.Rd b/man/ax_stroke.Rd index c0238ed..329d2ad 100644 --- a/man/ax_stroke.Rd +++ b/man/ax_stroke.Rd @@ -38,3 +38,26 @@ Stroke properties \note{ See \url{https://apexcharts.com/docs/options/stroke/} } +\examples{ +data("economics", package = "ggplot2") +apex( + data = economics, + mapping = aes(x = date, y = uempmed), + type = "line" +) \%>\% + ax_stroke( + width = 1, + dashArray = 4 + ) + +data("economics_long", package = "ggplot2") +apex( + data = economics_long, + mapping = aes(x = date, y = value01, group = variable), + type = "line" +) \%>\% + ax_stroke( + width = c(1, 2, 3, 4, 5), + dashArray = c(1, 2, 3, 4, 5) + ) +} diff --git a/man/ax_subtitle.Rd b/man/ax_subtitle.Rd index be60a24..45f01f4 100644 --- a/man/ax_subtitle.Rd +++ b/man/ax_subtitle.Rd @@ -36,3 +36,17 @@ Chart's subtitle \note{ See \url{https://apexcharts.com/docs/options/subtitle/} } +\examples{ +data("economics", package = "ggplot2") +apex( + data = economics, + mapping = aes(x = date, y = uempmed), + type = "line" +) \%>\% + ax_title( + text = "Median duration of unemployment" + ) \%>\% + ax_subtitle( + text = "in weeks" + ) +} diff --git a/man/ax_title.Rd b/man/ax_title.Rd index 1f38e84..000d1c0 100644 --- a/man/ax_title.Rd +++ b/man/ax_title.Rd @@ -36,3 +36,14 @@ Chart's title \note{ See \url{https://apexcharts.com/docs/options/title/} } +\examples{ +data("economics", package = "ggplot2") +apex( + data = economics, + mapping = aes(x = date, y = uempmed), + type = "line" +) \%>\% + ax_title( + text = "Median duration of unemployment, in weeks" + ) +} diff --git a/man/ax_tooltip.Rd b/man/ax_tooltip.Rd index d84a692..96df21b 100644 --- a/man/ax_tooltip.Rd +++ b/man/ax_tooltip.Rd @@ -54,3 +54,32 @@ Tooltip options \note{ See \url{https://apexcharts.com/docs/options/tooltip/} } +\examples{ +library(dplyr) +data("mpg", package = "ggplot2") + +# Hide tooltip +apex( + data = count(mpg, manufacturer, year), + mapping = aes(x = manufacturer, y = n, fill = year) +) \%>\% + ax_tooltip(enabled = FALSE) + +# Share between series +apex( + data = count(mpg, manufacturer, year), + mapping = aes(x = manufacturer, y = n, fill = year) +) \%>\% + ax_tooltip(shared = TRUE) + +# Fixed tooltip +data("economics", package = "ggplot2") +apex( + data = economics, + mapping = aes(x = date, y = psavert), + type = "line" +) \%>\% + ax_tooltip( + fixed = list(enabled = TRUE, position = "topLeft") + ) +} diff --git a/man/ax_yaxis.Rd b/man/ax_yaxis.Rd index bae1a58..5ec7d63 100644 --- a/man/ax_yaxis.Rd +++ b/man/ax_yaxis.Rd @@ -46,3 +46,14 @@ Y-axis options \note{ See \url{https://apexcharts.com/docs/options/yaxis/} } +\examples{ +data("economics_long", package = "ggplot2") +apex( + data = economics_long, + mapping = aes(x = date, y = value01, group = variable), + type = "line" +) \%>\% + ax_yaxis( + decimalsInFloat = 2, title = list(text = "Rescaled to [0,1]") + ) +} diff --git a/man/bar_opts.Rd b/man/bar_opts.Rd index c7f741d..174201a 100644 --- a/man/bar_opts.Rd +++ b/man/bar_opts.Rd @@ -11,7 +11,7 @@ bar_opts(horizontal = NULL, endingShape = NULL, columnWidth = NULL, \arguments{ \item{horizontal}{Logical. This option will turn a column chart into a horiontal bar chart.} -\item{endingShape}{Available Options: \code{"flat"}, \code{"rounded"} or \code{"arrow"}.} +\item{endingShape}{Available Options: \code{"flat"} or \code{"rounded"}.} \item{columnWidth}{In column charts, columnWidth is the percentage of the available width in the grid-rect.} diff --git a/man/radialBar_opts.Rd b/man/radialBar_opts.Rd index 10098db..15341da 100644 --- a/man/radialBar_opts.Rd +++ b/man/radialBar_opts.Rd @@ -35,3 +35,29 @@ Use these options in \code{\link{ax_plotOptions}}. \note{ See \url{https://apexcharts.com/docs/options/plotoptions/radialbar/}. } +\examples{ +apexchart() \%>\% + ax_chart(type = "radialBar") \%>\% + ax_plotOptions( + radialBar = radialBar_opts( + startAngle = -135, + endAngle = 135, + dataLabels = list( + name = list( + fontSize = "16px", + # color = undefined, + offsetY = 120 + ), + value = list( + offsetY = 76, + fontSize = "22px", + # color = undefined, + formatter = htmlwidgets::JS("function (val) {return val + '\%';}") + ) + ) + ) + ) \%>\% + ax_stroke(dashArray = 4) \%>\% + ax_series(70) \%>\% + ax_labels("Indicator") +}