diff --git a/R/apex-utils.R b/R/apex-utils.R index 8aaba8c..f78e7cd 100644 --- a/R/apex-utils.R +++ b/R/apex-utils.R @@ -212,7 +212,8 @@ ax_grid <- function(ax, #' Alternative axis labels #' #' @param ax A \code{apexcharts} \code{htmlwidget} object. -#' @param ... +#' @param ... Vector. In Axis Charts (line / column), labels can be set instead of setting xaxis categories +#' option. While, in pie/donut charts, each label corresponds to value in series array. #' #' @return A \code{apexcharts} \code{htmlwidget} object. #' @export @@ -226,22 +227,27 @@ ax_labels <- function(ax, ...) { #' Legend properties #' #' @param ax A \code{apexcharts} \code{htmlwidget} object. -#' @param show -#' @param floating -#' @param position -#' @param horizontalAlign -#' @param verticalAlign -#' @param fontSize -#' @param textAnchor -#' @param offsetY -#' @param offsetX -#' @param formatter -#' @param labels -#' @param markers -#' @param itemMargin -#' @param containerMargin -#' @param onItemClick -#' @param onItemHover +#' @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 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. +#' @param offsetX Sets the left offset for legend container. +#' @param formatter JS function. A custom formatter function to append additional text to the legend series names. +#' @param labels List with two items \code{"foreColor"} (Custom text color for legend labels) +#' and \code{"useSeriesColors"} (Logical, whether to use primary colors or not) +#' @param markers List. +#' @param itemMargin List with two items \code{"horizontal"} (Horizontal margin for individual legend item) +#' and \code{"vertical"} (Vertical margin for individual legend item). +#' @param containerMargin List with two items \code{"top"} (Top margin for the whole legend container) +#' and \code{"left"} (Left margin for the whole legend container). +#' @param onItemClick List with item \code{"toggleDataSeries"}, logical, +#' when clicked on legend item, it will toggle the visibility of the series in chart. +#' @param onItemHover List with item \code{"highlightDataSeries"}, logical, +#' when hovered on legend item, it will highlight the paths of the hovered series in chart. +#' @param floating Logical. The floating option will take out the legend from the chart area and make it float above the chart. #' @param ... Additional parameters. #' #' @return A \code{apexcharts} \code{htmlwidget} object. @@ -250,7 +256,6 @@ ax_labels <- function(ax, ...) { #' @examples ax_legend <- function(ax, show = NULL, - floating = NULL, position = NULL, horizontFalAlign = NULL, verticalAlign = NULL, @@ -265,6 +270,7 @@ ax_legend <- function(ax, containerMargin = NULL, onItemClick = NULL, onItemHover = NULL, + floating = NULL, ...) { params <- c(as.list(environment()), list(...))[-1] .ax_opt2(ax, "legend", l = dropNulls(params)) @@ -356,7 +362,7 @@ ax_responsive <- function(ax, ...) { #' Add data to a chart #' #' @param ax A \code{apexcharts} \code{htmlwidget} object. -#' @param ... Additional parameters. +#' @param ... Lists containing data to plot, typically list with two items: \code{name} and \code{data}. #' #' @return A \code{apexcharts} \code{htmlwidget} object. #' @export @@ -370,9 +376,9 @@ ax_series <- function(ax, ...) { #' Charts' states #' #' @param ax A \code{apexcharts} \code{htmlwidget} object. -#' @param normal -#' @param hover -#' @param active +#' @param normal List. +#' @param hover List. +#' @param active List. #' @param ... Additional parameters. #' #' @return A \code{apexcharts} \code{htmlwidget} object. @@ -392,13 +398,13 @@ ax_states <- function(ax, #' Chart's title #' #' @param ax A \code{apexcharts} \code{htmlwidget} object. -#' @param text -#' @param align -#' @param margin -#' @param offsetX -#' @param offsetY -#' @param floating -#' @param style +#' @param text Text to display as a title of chart. +#' @param align Alignment of subtitle relative to chart area. Possible Options: \code{"left"}, \code{"center"} and \code{"right"}. +#' @param margin Numeric. Vertical spacing around the title text. +#' @param offsetX Numeric. Sets the left offset for subtitle text. +#' @param offsetY Numeric. Sets the top offset for subtitle text +#' @param floating Logical. The floating option will take out the subtitle text from the chart area and make it float on top of the chart. +#' @param style List with two items: \code{fontSize} (Font Size of the title text) and \code{color} (Fore color of the title text). #' @param ... Additional parameters. #' #' @return A \code{apexcharts} \code{htmlwidget} object. @@ -428,7 +434,7 @@ ax_title <- function(ax, #' @param offsetX Numeric. Sets the left offset for subtitle text. #' @param offsetY Numeric. Sets the top offset for subtitle text #' @param floating Logical. The floating option will take out the subtitle text from the chart area and make it float on top of the chart. -#' @param style List. +#' @param style List with two items: \code{fontSize} (Font Size of the subtitle text) and \code{color} (Fore color of the subtitle text). #' @param ... Additional parameters. #' #' @return A \code{apexcharts} \code{htmlwidget} object. diff --git a/README.md b/README.md index 6740db9..9d8671e 100644 --- a/README.md +++ b/README.md @@ -13,9 +13,49 @@ You can install the development version from [GitHub](https://github.com/) with: devtools::install_github("dreamRs/apexcharter") ``` +## Basic example + +Simple bar chart : + +```r +library(apexcharter) +library(ggplot2) # for data +library(dplyr) +library(magrittr) + +data(mpg) +dat <- count(mpg, manufacturer) + +apexcharter() %>% + ax_chart(type = "bar") %>% + ax_plotOptions(bar = list( + horizontal = FALSE, + endingShape = "flat", + columnWidth = "70%", + dataLabels = list( + position = "top" + )) + ) %>% + ax_grid( + show = TRUE, + position = "front" + ) %>% + ax_series(list( + name = "Count", + data = dat$n + )) %>% + ax_colors("#112446") %>% + ax_xaxis(categories = dat$manufacturer) %>% + ax_title(text = "Number of models") %>% + ax_subtitle(text = "Data from ggplot2") +``` + +![alt text](img/api-bars.png) + + ## Raw API -Only raw API available for now : +Pass a list of parameters to the function: ``` r apexcharter(ax_opts = list( diff --git a/img/api-bars.png b/img/api-bars.png new file mode 100644 index 0000000..32334ba Binary files /dev/null and b/img/api-bars.png differ diff --git a/man/ax_labels.Rd b/man/ax_labels.Rd index 0513fff..786ca75 100644 --- a/man/ax_labels.Rd +++ b/man/ax_labels.Rd @@ -9,7 +9,8 @@ ax_labels(ax, ...) \arguments{ \item{ax}{A \code{apexcharts} \code{htmlwidget} object.} -\item{...}{} +\item{...}{Vector. In Axis Charts (line / column), labels can be set instead of setting xaxis categories +option. While, in pie/donut charts, each label corresponds to value in series array.} } \value{ A \code{apexcharts} \code{htmlwidget} object. diff --git a/man/ax_legend.Rd b/man/ax_legend.Rd index 65ceefe..ed57d21 100644 --- a/man/ax_legend.Rd +++ b/man/ax_legend.Rd @@ -4,48 +4,53 @@ \alias{ax_legend} \title{Legend properties} \usage{ -ax_legend(ax, show = NULL, floating = NULL, position = NULL, - horizontFalAlign = 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, ...) +ax_legend(ax, show = NULL, position = NULL, horizontFalAlign = 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, ...) } \arguments{ \item{ax}{A \code{apexcharts} \code{htmlwidget} object.} -\item{show}{} +\item{show}{Logical. Whether to show or hide the legend container.} -\item{floating}{} +\item{position}{Available position options for legend: \code{"top"}, \code{"right"}, \code{"bottom"}, \code{"left"}.} -\item{position}{} +\item{verticalAlign}{Available options for vertical alignment: \code{"top"}, \code{"middle"}, \code{"bottom"}} -\item{verticalAlign}{} +\item{fontSize}{Sets the fontSize of legend text elements} -\item{fontSize}{} +\item{textAnchor}{The alignment of text relative to legend’s drawing position} -\item{textAnchor}{} +\item{offsetY}{Sets the top offset for legend container.} -\item{offsetY}{} +\item{offsetX}{Sets the left offset for legend container.} -\item{offsetX}{} +\item{formatter}{JS function. A custom formatter function to append additional text to the legend series names.} -\item{formatter}{} +\item{labels}{List with two items \code{"foreColor"} (Custom text color for legend labels) +and \code{"useSeriesColors"} (Logical, whether to use primary colors or not)} -\item{labels}{} +\item{markers}{List.} -\item{markers}{} +\item{itemMargin}{List with two items \code{"horizontal"} (Horizontal margin for individual legend item) +and \code{"vertical"} (Vertical margin for individual legend item).} -\item{itemMargin}{} +\item{containerMargin}{List with two items \code{"top"} (Top margin for the whole legend container) +and \code{"left"} (Left margin for the whole legend container).} -\item{containerMargin}{} +\item{onItemClick}{List with item \code{"toggleDataSeries"}, logical, +when clicked on legend item, it will toggle the visibility of the series in chart.} -\item{onItemClick}{} +\item{onItemHover}{List with item \code{"highlightDataSeries"}, logical, +when hovered on legend item, it will highlight the paths of the hovered series in chart.} -\item{onItemHover}{} +\item{floating}{Logical. The floating option will take out the legend from the chart area and make it float above the chart.} \item{...}{Additional parameters.} -\item{horizontalAlign}{} +\item{horizontalAlign}{Available options for horizontal alignment: \code{"right"}, \code{"center"}, \code{"left"}.} } \value{ A \code{apexcharts} \code{htmlwidget} object. diff --git a/man/ax_series.Rd b/man/ax_series.Rd index 2c509f2..d941db8 100644 --- a/man/ax_series.Rd +++ b/man/ax_series.Rd @@ -9,7 +9,7 @@ ax_series(ax, ...) \arguments{ \item{ax}{A \code{apexcharts} \code{htmlwidget} object.} -\item{...}{Additional parameters.} +\item{...}{Lists containing data to plot, typically list with two items: \code{name} and \code{data}.} } \value{ A \code{apexcharts} \code{htmlwidget} object. diff --git a/man/ax_states.Rd b/man/ax_states.Rd index 96e0e81..89e7193 100644 --- a/man/ax_states.Rd +++ b/man/ax_states.Rd @@ -9,11 +9,11 @@ ax_states(ax, normal = NULL, hover = NULL, active = NULL, ...) \arguments{ \item{ax}{A \code{apexcharts} \code{htmlwidget} object.} -\item{normal}{} +\item{normal}{List.} -\item{hover}{} +\item{hover}{List.} -\item{active}{} +\item{active}{List.} \item{...}{Additional parameters.} } diff --git a/man/ax_subtitle.Rd b/man/ax_subtitle.Rd index 17ffaaa..443bb45 100644 --- a/man/ax_subtitle.Rd +++ b/man/ax_subtitle.Rd @@ -22,7 +22,7 @@ ax_subtitle(ax, text = NULL, align = NULL, margin = NULL, \item{floating}{Logical. The floating option will take out the subtitle text from the chart area and make it float on top of the chart.} -\item{style}{List.} +\item{style}{List with two items: \code{fontSize} (Font Size of the subtitle text) and \code{color} (Fore color of the subtitle text).} \item{...}{Additional parameters.} } diff --git a/man/ax_title.Rd b/man/ax_title.Rd index 0b57686..f819b88 100644 --- a/man/ax_title.Rd +++ b/man/ax_title.Rd @@ -10,19 +10,19 @@ ax_title(ax, text = NULL, align = NULL, margin = NULL, offsetX = NULL, \arguments{ \item{ax}{A \code{apexcharts} \code{htmlwidget} object.} -\item{text}{} +\item{text}{Text to display as a title of chart.} -\item{align}{} +\item{align}{Alignment of subtitle relative to chart area. Possible Options: \code{"left"}, \code{"center"} and \code{"right"}.} -\item{margin}{} +\item{margin}{Numeric. Vertical spacing around the title text.} -\item{offsetX}{} +\item{offsetX}{Numeric. Sets the left offset for subtitle text.} -\item{offsetY}{} +\item{offsetY}{Numeric. Sets the top offset for subtitle text} -\item{floating}{} +\item{floating}{Logical. The floating option will take out the subtitle text from the chart area and make it float on top of the chart.} -\item{style}{} +\item{style}{List with two items: \code{fontSize} (Font Size of the title text) and \code{color} (Fore color of the title text).} \item{...}{Additional parameters.} }