more docs & readme

This commit is contained in:
pvictor 2018-07-31 23:24:35 +02:00
parent c34718245b
commit cd51e66336
9 changed files with 117 additions and 65 deletions

View File

@ -212,7 +212,8 @@ ax_grid <- function(ax,
#' Alternative axis labels #' Alternative axis labels
#' #'
#' @param ax A \code{apexcharts} \code{htmlwidget} object. #' @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. #' @return A \code{apexcharts} \code{htmlwidget} object.
#' @export #' @export
@ -226,22 +227,27 @@ ax_labels <- function(ax, ...) {
#' Legend properties #' Legend properties
#' #'
#' @param ax A \code{apexcharts} \code{htmlwidget} object. #' @param ax A \code{apexcharts} \code{htmlwidget} object.
#' @param show #' @param show Logical. Whether to show or hide the legend container.
#' @param floating #' @param position Available position options for legend: \code{"top"}, \code{"right"}, \code{"bottom"}, \code{"left"}.
#' @param position #' @param horizontalAlign Available options for horizontal alignment: \code{"right"}, \code{"center"}, \code{"left"}.
#' @param horizontalAlign #' @param verticalAlign Available options for vertical alignment: \code{"top"}, \code{"middle"}, \code{"bottom"}
#' @param verticalAlign #' @param fontSize Sets the fontSize of legend text elements
#' @param fontSize #' @param textAnchor The alignment of text relative to legends drawing position
#' @param textAnchor #' @param offsetY Sets the top offset for legend container.
#' @param offsetY #' @param offsetX Sets the left offset for legend container.
#' @param offsetX #' @param formatter JS function. A custom formatter function to append additional text to the legend series names.
#' @param formatter #' @param labels List with two items \code{"foreColor"} (Custom text color for legend labels)
#' @param labels #' and \code{"useSeriesColors"} (Logical, whether to use primary colors or not)
#' @param markers #' @param markers List.
#' @param itemMargin #' @param itemMargin List with two items \code{"horizontal"} (Horizontal margin for individual legend item)
#' @param containerMargin #' and \code{"vertical"} (Vertical margin for individual legend item).
#' @param onItemClick #' @param containerMargin List with two items \code{"top"} (Top margin for the whole legend container)
#' @param onItemHover #' 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. #' @param ... Additional parameters.
#' #'
#' @return A \code{apexcharts} \code{htmlwidget} object. #' @return A \code{apexcharts} \code{htmlwidget} object.
@ -250,7 +256,6 @@ ax_labels <- function(ax, ...) {
#' @examples #' @examples
ax_legend <- function(ax, ax_legend <- function(ax,
show = NULL, show = NULL,
floating = NULL,
position = NULL, position = NULL,
horizontFalAlign = NULL, horizontFalAlign = NULL,
verticalAlign = NULL, verticalAlign = NULL,
@ -265,6 +270,7 @@ ax_legend <- function(ax,
containerMargin = NULL, containerMargin = NULL,
onItemClick = NULL, onItemClick = NULL,
onItemHover = NULL, onItemHover = NULL,
floating = NULL,
...) { ...) {
params <- c(as.list(environment()), list(...))[-1] params <- c(as.list(environment()), list(...))[-1]
.ax_opt2(ax, "legend", l = dropNulls(params)) .ax_opt2(ax, "legend", l = dropNulls(params))
@ -356,7 +362,7 @@ ax_responsive <- function(ax, ...) {
#' Add data to a chart #' Add data to a chart
#' #'
#' @param ax A \code{apexcharts} \code{htmlwidget} object. #' @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. #' @return A \code{apexcharts} \code{htmlwidget} object.
#' @export #' @export
@ -370,9 +376,9 @@ ax_series <- function(ax, ...) {
#' Charts' states #' Charts' states
#' #'
#' @param ax A \code{apexcharts} \code{htmlwidget} object. #' @param ax A \code{apexcharts} \code{htmlwidget} object.
#' @param normal #' @param normal List.
#' @param hover #' @param hover List.
#' @param active #' @param active List.
#' @param ... Additional parameters. #' @param ... Additional parameters.
#' #'
#' @return A \code{apexcharts} \code{htmlwidget} object. #' @return A \code{apexcharts} \code{htmlwidget} object.
@ -392,13 +398,13 @@ ax_states <- function(ax,
#' Chart's title #' Chart's title
#' #'
#' @param ax A \code{apexcharts} \code{htmlwidget} object. #' @param ax A \code{apexcharts} \code{htmlwidget} object.
#' @param text #' @param text Text to display as a title of chart.
#' @param align #' @param align Alignment of subtitle relative to chart area. Possible Options: \code{"left"}, \code{"center"} and \code{"right"}.
#' @param margin #' @param margin Numeric. Vertical spacing around the title text.
#' @param offsetX #' @param offsetX Numeric. Sets the left offset for subtitle text.
#' @param offsetY #' @param offsetY Numeric. Sets the top offset for subtitle text
#' @param floating #' @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 #' @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. #' @param ... Additional parameters.
#' #'
#' @return A \code{apexcharts} \code{htmlwidget} object. #' @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 offsetX Numeric. Sets the left offset for subtitle text.
#' @param offsetY Numeric. Sets the top 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 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. #' @param ... Additional parameters.
#' #'
#' @return A \code{apexcharts} \code{htmlwidget} object. #' @return A \code{apexcharts} \code{htmlwidget} object.

View File

@ -13,9 +13,49 @@ You can install the development version from [GitHub](https://github.com/) with:
devtools::install_github("dreamRs/apexcharter") 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 ## Raw API
Only raw API available for now : Pass a list of parameters to the function:
``` r ``` r
apexcharter(ax_opts = list( apexcharter(ax_opts = list(

BIN
img/api-bars.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

View File

@ -9,7 +9,8 @@ ax_labels(ax, ...)
\arguments{ \arguments{
\item{ax}{A \code{apexcharts} \code{htmlwidget} object.} \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{ \value{
A \code{apexcharts} \code{htmlwidget} object. A \code{apexcharts} \code{htmlwidget} object.

View File

@ -4,48 +4,53 @@
\alias{ax_legend} \alias{ax_legend}
\title{Legend properties} \title{Legend properties}
\usage{ \usage{
ax_legend(ax, show = NULL, floating = NULL, position = NULL, ax_legend(ax, show = NULL, position = NULL, horizontFalAlign = NULL,
horizontFalAlign = NULL, verticalAlign = NULL, fontSize = NULL, verticalAlign = NULL, fontSize = NULL, textAnchor = NULL,
textAnchor = NULL, offsetY = NULL, offsetX = NULL, formatter = NULL, offsetY = NULL, offsetX = NULL, formatter = NULL, labels = NULL,
labels = NULL, markers = NULL, itemMargin = NULL, markers = NULL, itemMargin = NULL, containerMargin = NULL,
containerMargin = NULL, onItemClick = NULL, onItemHover = NULL, ...) onItemClick = NULL, onItemHover = NULL, floating = NULL, ...)
} }
\arguments{ \arguments{
\item{ax}{A \code{apexcharts} \code{htmlwidget} object.} \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 legends 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{...}{Additional parameters.}
\item{horizontalAlign}{} \item{horizontalAlign}{Available options for horizontal alignment: \code{"right"}, \code{"center"}, \code{"left"}.}
} }
\value{ \value{
A \code{apexcharts} \code{htmlwidget} object. A \code{apexcharts} \code{htmlwidget} object.

View File

@ -9,7 +9,7 @@ ax_series(ax, ...)
\arguments{ \arguments{
\item{ax}{A \code{apexcharts} \code{htmlwidget} object.} \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{ \value{
A \code{apexcharts} \code{htmlwidget} object. A \code{apexcharts} \code{htmlwidget} object.

View File

@ -9,11 +9,11 @@ ax_states(ax, normal = NULL, hover = NULL, active = NULL, ...)
\arguments{ \arguments{
\item{ax}{A \code{apexcharts} \code{htmlwidget} object.} \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.} \item{...}{Additional parameters.}
} }

View File

@ -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{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.} \item{...}{Additional parameters.}
} }

View File

@ -10,19 +10,19 @@ ax_title(ax, text = NULL, align = NULL, margin = NULL, offsetX = NULL,
\arguments{ \arguments{
\item{ax}{A \code{apexcharts} \code{htmlwidget} object.} \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.} \item{...}{Additional parameters.}
} }