docs & examples
This commit is contained in:
parent
28fc8a10d9
commit
68a2653972
|
@ -1,5 +1,5 @@
|
|||
Package: apexcharter
|
||||
Version: 0.0.0.9000
|
||||
Version: 0.0.0.9100
|
||||
Title: Create Interactive Chart with the JavaScript 'ApexCharts' Library
|
||||
Description: Provides an 'htmlwidgets' interface to 'apexcharts.js'.
|
||||
Authors@R: c(
|
||||
|
@ -12,7 +12,8 @@ LazyData: true
|
|||
ByteCompile: true
|
||||
Imports:
|
||||
htmlwidgets,
|
||||
magrittr
|
||||
magrittr,
|
||||
data.table
|
||||
RoxygenNote: 6.1.0
|
||||
URL: https://github.com/dreamRs/apexcharter
|
||||
BugReports: https://github.com/dreamRs/apexcharter/issues
|
||||
|
|
|
@ -12,7 +12,6 @@ export(ax_grid)
|
|||
export(ax_labels)
|
||||
export(ax_legend)
|
||||
export(ax_markers)
|
||||
export(ax_noData)
|
||||
export(ax_plotOptions)
|
||||
export(ax_responsive)
|
||||
export(ax_series)
|
||||
|
@ -27,11 +26,11 @@ export(ax_yaxis)
|
|||
export(barOpts)
|
||||
export(eventsOpts)
|
||||
export(heatmapOpts)
|
||||
export(parse_df)
|
||||
export(pieOpts)
|
||||
export(radialBarOpts)
|
||||
export(renderApexcharter)
|
||||
export(scrollerOpts)
|
||||
export(selectionOpts)
|
||||
importFrom(data.table,transpose)
|
||||
importFrom(htmlwidgets,createWidget)
|
||||
importFrom(htmlwidgets,shinyRenderWidget)
|
||||
importFrom(htmlwidgets,shinyWidgetOutput)
|
||||
|
|
|
@ -16,9 +16,9 @@
|
|||
#' @param padding
|
||||
#' @param offsetX
|
||||
#' @param offsetY
|
||||
#' @param ...
|
||||
#' @param ... Additional parameters.
|
||||
#'
|
||||
#' @export
|
||||
#' @noRd
|
||||
#'
|
||||
scrollerOpts <- function(enabled = NULL,
|
||||
height = NULL,
|
||||
|
@ -97,7 +97,7 @@ eventsOpts <- function(beforeMount = NULL,
|
|||
#' @param yaxis
|
||||
#' @param ...
|
||||
#'
|
||||
#' @export
|
||||
#' @noRd
|
||||
#'
|
||||
selectionOpts <- function(enabled = NULL,
|
||||
type = NULL,
|
||||
|
|
153
R/apex-utils.R
153
R/apex-utils.R
|
@ -20,7 +20,6 @@
|
|||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @examples
|
||||
ax_annotations <- function(ax,
|
||||
position = NULL,
|
||||
yaxis = NULL,
|
||||
|
@ -39,18 +38,18 @@ ax_annotations <- function(ax,
|
|||
#' \code{"histogram"}, \code{"pie"}, \code{"donut"}, \code{"radialBar"}, \code{"scatter"}, \code{"bubble"}, \code{"heatmap"}.
|
||||
#' @param stacked Logical. Enables stacked option for axis charts.
|
||||
#' @param stackType When stacked, should the stacking be percentage based or normal stacking. Available options: \code{"normal"} or \code{"100\%"}
|
||||
#' @param animations List.
|
||||
#' @param animations A list of parameters.
|
||||
#' @param background Background color for the chart area. If you want to set background with css, use \code{.apexcharts-canvas} to set it.
|
||||
#' @param foreColor Sets the text color for the chart. Defaults to \code{#373d3f}.
|
||||
#' @param dropShadow List.
|
||||
#' @param events List.
|
||||
#' @param offsetX
|
||||
#' @param offsetY
|
||||
#' @param scroller List.
|
||||
#' @param selection List.
|
||||
#' @param dropShadow A list of parameters. See \url{https://apexcharts.com/docs/options/chart/dropshadow/}.
|
||||
#' @param events A list of parameters. See\url{https://apexcharts.com/docs/options/chart/events/}.
|
||||
#' @param offsetX Sets the left offset for chart.
|
||||
#' @param offsetY Sets the top offset for chart.
|
||||
#' @param scroller A list of parameters.
|
||||
#' @param selection A list of parameters.
|
||||
#' @param sparkline List. Sparkline hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas. .
|
||||
#' @param toolbar List.
|
||||
#' @param zoom List.
|
||||
#' @param toolbar A list of parameters. See \url{https://apexcharts.com/docs/options/chart/toolbar/}.
|
||||
#' @param zoom A list of parameters. See \url{https://apexcharts.com/docs/options/chart/zoom/}.
|
||||
#' @param width Width of the chart.
|
||||
#' @param height Height of the chart.
|
||||
#' @param ... Additional parameters.
|
||||
|
@ -58,7 +57,6 @@ ax_annotations <- function(ax,
|
|||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @examples
|
||||
ax_chart <- function(ax,
|
||||
type = NULL,
|
||||
stacked = NULL,
|
||||
|
@ -95,7 +93,6 @@ ax_chart <- function(ax,
|
|||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @examples
|
||||
ax_plotOptions <- function(ax,
|
||||
bar = NULL,
|
||||
heatmap = NULL,
|
||||
|
@ -114,8 +111,9 @@ ax_plotOptions <- function(ax,
|
|||
#'
|
||||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @note See \url{https://apexcharts.com/docs/options/colors/}
|
||||
#'
|
||||
#' @examples
|
||||
ax_colors <- function(ax, ...) {
|
||||
.ax_opt(ax, "colors", ...)
|
||||
}
|
||||
|
@ -124,18 +122,21 @@ ax_colors <- function(ax, ...) {
|
|||
#' Labels on data
|
||||
#'
|
||||
#' @param ax A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @param enabled
|
||||
#' @param textAnchor
|
||||
#' @param offsetX
|
||||
#' @param offsetY
|
||||
#' @param style
|
||||
#' @param dropShadow
|
||||
#' @param enabled To determine whether to show dataLabels or not.
|
||||
#' @param textAnchor The alignment of text relative to dataLabel’s drawing position.
|
||||
#' Accepted values \code{"start"}, \code{"middle"} or \code{"end"}.
|
||||
#' @param offsetX Sets the left offset for dataLabels.
|
||||
#' @param offsetY Sets the top offset for dataLabels.
|
||||
#' @param style A list of parameters.
|
||||
#' @param dropShadow A list of parameters.
|
||||
#' @param formatter The formatter function takes in a single value and allows you to format the value before displaying
|
||||
#' @param ... Additional parameters.
|
||||
#'
|
||||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @note See \url{https://apexcharts.com/docs/options/datalabels/}
|
||||
#'
|
||||
#' @examples
|
||||
ax_dataLabels <- function(ax,
|
||||
enabled = NULL,
|
||||
textAnchor = NULL,
|
||||
|
@ -143,6 +144,7 @@ ax_dataLabels <- function(ax,
|
|||
offsetY = NULL,
|
||||
style = NULL,
|
||||
dropShadow = NULL,
|
||||
formatter = NULL,
|
||||
...) {
|
||||
params <- c(as.list(environment()), list(...))[-1]
|
||||
.ax_opt2(ax, "dataLabels", l = dropNulls(params))
|
||||
|
@ -152,18 +154,20 @@ ax_dataLabels <- function(ax,
|
|||
#' Fill property
|
||||
#'
|
||||
#' @param ax A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @param type
|
||||
#' @param colors
|
||||
#' @param opacity
|
||||
#' @param gradient
|
||||
#' @param image
|
||||
#' @param pattern
|
||||
#' @param type Whether to fill the paths with solid colors or gradient.
|
||||
#' Available options: \code{"solid"}, \code{"gradient"}, \code{"pattern"} or \code{"image"}.
|
||||
#' @param colors Colors to fill the svg paths..
|
||||
#' @param opacity Opacity of the fill attribute.
|
||||
#' @param gradient A list of parameters.
|
||||
#' @param image A list of parameters.
|
||||
#' @param pattern A list of parameters.
|
||||
#' @param ... Additional parameters.
|
||||
#'
|
||||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @note See \url{https://apexcharts.com/docs/options/fill/}
|
||||
#'
|
||||
#' @examples
|
||||
ax_fill <- function(ax,
|
||||
type = NULL,
|
||||
colors = NULL,
|
||||
|
@ -184,17 +188,18 @@ ax_fill <- function(ax,
|
|||
#' @param borderColor Colors of grid borders / lines.
|
||||
#' @param strokeDashArray Creates dashes in borders of svg path. Higher number creates more space between dashes in the border.
|
||||
#' @param position Whether to place grid behind chart paths of in front. Available options for position: \code{"front"} or \code{"back"}
|
||||
#' @param xaxis List.
|
||||
#' @param yaxis List.
|
||||
#' @param row List.
|
||||
#' @param column List.
|
||||
#' @param padding List.
|
||||
#' @param xaxis A list of parameters.
|
||||
#' @param yaxis A list of parameters.
|
||||
#' @param row A list of parameters.
|
||||
#' @param column A list of parameters.
|
||||
#' @param padding A list of parameters.
|
||||
#' @param ... Additional parameters.
|
||||
#'
|
||||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @examples
|
||||
#' @note See \url{https://apexcharts.com/docs/options/grid/}
|
||||
#'
|
||||
ax_grid <- function(ax,
|
||||
show = NULL,
|
||||
borderColor = NULL,
|
||||
|
@ -220,7 +225,7 @@ ax_grid <- function(ax,
|
|||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @examples
|
||||
#' @note See \url{https://apexcharts.com/docs/options/labels/}
|
||||
ax_labels <- function(ax, ...) {
|
||||
.ax_opt(ax, "labels", ...)
|
||||
}
|
||||
|
@ -255,11 +260,11 @@ ax_labels <- function(ax, ...) {
|
|||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @examples
|
||||
#' @note See \url{https://apexcharts.com/docs/options/legend/}
|
||||
ax_legend <- function(ax,
|
||||
show = NULL,
|
||||
position = NULL,
|
||||
horizontFalAlign = NULL,
|
||||
horizontalAlign = NULL,
|
||||
verticalAlign = NULL,
|
||||
fontSize = NULL,
|
||||
textAnchor = NULL,
|
||||
|
@ -298,7 +303,8 @@ ax_legend <- function(ax,
|
|||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @examples
|
||||
#' @note See \url{https://apexcharts.com/docs/options/markers/}
|
||||
#'
|
||||
ax_markers <- function(ax,
|
||||
size = NULL,
|
||||
colors = NULL,
|
||||
|
@ -316,7 +322,7 @@ ax_markers <- function(ax,
|
|||
.ax_opt2(ax, "markers", l = dropNulls(params))
|
||||
}
|
||||
|
||||
|
||||
#
|
||||
#' No data specification
|
||||
#'
|
||||
#' @param ax A \code{apexcharts} \code{htmlwidget} object.
|
||||
|
@ -329,9 +335,8 @@ ax_markers <- function(ax,
|
|||
#' @param ... Additional parameters.
|
||||
#'
|
||||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#' @noRd
|
||||
#'
|
||||
#' @examples
|
||||
ax_noData <- function(ax,
|
||||
text = NULL,
|
||||
align = NULL,
|
||||
|
@ -348,12 +353,12 @@ ax_noData <- function(ax,
|
|||
#' Responsive options
|
||||
#'
|
||||
#' @param ax A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @param ...
|
||||
#' @param ... Additional parameters.
|
||||
#'
|
||||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @examples
|
||||
#' @note See \url{https://apexcharts.com/docs/options/responsive/}
|
||||
ax_responsive <- function(ax, ...) {
|
||||
.ax_opt(ax, "responsive", ...)
|
||||
}
|
||||
|
@ -396,15 +401,15 @@ ax_series <- function(ax, ...) {
|
|||
#' Charts' states
|
||||
#'
|
||||
#' @param ax A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @param normal List.
|
||||
#' @param hover List.
|
||||
#' @param active List.
|
||||
#' @param normal A list of parameters.
|
||||
#' @param hover A list of parameters.
|
||||
#' @param active A list of parameters.
|
||||
#' @param ... Additional parameters.
|
||||
#'
|
||||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @examples
|
||||
#' @note See \url{https://apexcharts.com/docs/options/states/}
|
||||
ax_states <- function(ax,
|
||||
normal = NULL,
|
||||
hover = NULL,
|
||||
|
@ -430,7 +435,7 @@ ax_states <- function(ax,
|
|||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @examples
|
||||
#' @note See \url{https://apexcharts.com/docs/options/title/}
|
||||
ax_title <- function(ax,
|
||||
text = NULL,
|
||||
align = NULL,
|
||||
|
@ -460,7 +465,7 @@ ax_title <- function(ax,
|
|||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @examples
|
||||
#' @note See \url{https://apexcharts.com/docs/options/subtitle/}
|
||||
ax_subtitle <- function(ax,
|
||||
text = NULL,
|
||||
align = NULL,
|
||||
|
@ -494,7 +499,7 @@ ax_subtitle <- function(ax,
|
|||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @examples
|
||||
#' @note See \url{https://apexcharts.com/docs/options/stroke/}
|
||||
ax_stroke <- function(ax,
|
||||
show = NULL,
|
||||
curve = NULL,
|
||||
|
@ -518,20 +523,20 @@ ax_stroke <- function(ax,
|
|||
#' @param inverseOrder Logical. In multiple series, when having shared tooltip, inverse the order of series (for better comparison in stacked charts).
|
||||
#' @param custom JS function. Draw a custom html tooltip instead of the default one based on the values provided in the function arguments.
|
||||
#' @param fillSeriesColor Logical. When enabled, fill the tooltip background with the corresponding series color.
|
||||
#' @param onDatasetHover List.
|
||||
#' @param theme List.
|
||||
#' @param x List.
|
||||
#' @param y List.
|
||||
#' @param z List.
|
||||
#' @param marker List.
|
||||
#' @param items List.
|
||||
#' @param fixed List.
|
||||
#' @param onDatasetHover A list of parameters.
|
||||
#' @param theme A list of parameters.
|
||||
#' @param x A list of parameters.
|
||||
#' @param y A list of parameters.
|
||||
#' @param z A list of parameters.
|
||||
#' @param marker A list of parameters.
|
||||
#' @param items A list of parameters.
|
||||
#' @param fixed A list of parameters.
|
||||
#' @param ... Additional parameters.
|
||||
#'
|
||||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @examples
|
||||
#' @note See \url{https://apexcharts.com/docs/options/tooltip/}
|
||||
ax_tooltip <- function(ax,
|
||||
enabled = NULL,
|
||||
shared = NULL,
|
||||
|
@ -559,9 +564,9 @@ ax_tooltip <- function(ax,
|
|||
#' @param ax A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @param type Character. Available Options : \code{"categories"} and \code{"datetime"}.
|
||||
#' @param categories Categories are labels which are displayed on the x-axis.
|
||||
#' @param labels List.
|
||||
#' @param axisBorder List.
|
||||
#' @param axisTicks List.
|
||||
#' @param labels A list of parameters.
|
||||
#' @param axisBorder A list of parameters.
|
||||
#' @param axisTicks A list of parameters.
|
||||
#' @param tickAmount Number of Tick Intervals to show.
|
||||
#' @param min Lowest number to be set for the x-axis. The graph drawing beyond this number will be clipped off.
|
||||
#' @param max Highest number to be set for the x-axis. The graph drawing beyond this number will be clipped off.
|
||||
|
@ -570,15 +575,15 @@ ax_tooltip <- function(ax,
|
|||
#' @param floating Logical. Floating takes x-axis is taken out of normal flow and places x-axis on svg element directly,
|
||||
#' similar to an absolutely positioned element. Set the offsetX and offsetY then to adjust the position manually
|
||||
#' @param position Setting this option allows you to change the x-axis position. Available options: \code{"top"} and \code{"bottom"}.
|
||||
#' @param title List.
|
||||
#' @param crosshairs List.
|
||||
#' @param tooltip List.
|
||||
#' @param title A list of parameters.
|
||||
#' @param crosshairs A list of parameters.
|
||||
#' @param tooltip A list of parameters.
|
||||
#' @param ... Additional parameters.
|
||||
#'
|
||||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @examples
|
||||
#' @note See \url{https://apexcharts.com/docs/options/xaxis/}
|
||||
ax_xaxis <- function(ax,
|
||||
type = NULL,
|
||||
categories = NULL,
|
||||
|
@ -609,18 +614,18 @@ ax_xaxis <- function(ax,
|
|||
#' @param min Highest number to be set for the y-axis. The graph drawing beyond this number will be clipped off.
|
||||
#' @param floating Logical. Floating takes y-axis is taken out of normal flow and places y-axis on svg element directly,
|
||||
#' similar to an absolutely positioned element. Set the offsetX and offsetY then to adjust the position manually
|
||||
#' @param labels List.
|
||||
#' @param axisBorder List.
|
||||
#' @param axisTicks List.
|
||||
#' @param title List.
|
||||
#' @param tooltip List.
|
||||
#' @param crosshairs List.
|
||||
#' @param labels A list of parameters.
|
||||
#' @param axisBorder A list of parameters.
|
||||
#' @param axisTicks A list of parameters.
|
||||
#' @param title A list of parameters.
|
||||
#' @param tooltip A list of parameters.
|
||||
#' @param crosshairs A list of parameters.
|
||||
#' @param ... Additional parameters.
|
||||
#'
|
||||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @examples
|
||||
#' @note See \url{https://apexcharts.com/docs/options/yaxis/}
|
||||
ax_yaxis <- function(ax,
|
||||
opposite = NULL,
|
||||
tickAmount = NULL,
|
||||
|
@ -643,13 +648,13 @@ ax_yaxis <- function(ax,
|
|||
#'
|
||||
#' @param ax A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @param palette Character. Available palettes: \code{"palette1"} to \code{"palette10"}.
|
||||
#' @param monochrome List.
|
||||
#' @param monochrome A list of parameters.
|
||||
#' @param ... Additional parameters.
|
||||
#'
|
||||
#' @return A \code{apexcharts} \code{htmlwidget} object.
|
||||
#' @export
|
||||
#'
|
||||
#' @examples
|
||||
#' @note See \url{https://apexcharts.com/docs/options/theme/}
|
||||
ax_theme <- function(ax,
|
||||
palette = NULL,
|
||||
monochrome = NULL,
|
||||
|
|
|
@ -0,0 +1,28 @@
|
|||
|
||||
#' @title Convert a \code{data.frame} to a \code{list}
|
||||
#'
|
||||
#' @description Convert data to a format suitable for ApexCharts.js
|
||||
#'
|
||||
#' @param data A \code{data.frame} or an object coercible to \code{data.frame}.
|
||||
#'
|
||||
#' @export
|
||||
#' @importFrom data.table transpose
|
||||
#'
|
||||
parse_df <- function(data) {
|
||||
data <- as.data.frame(data)
|
||||
l <- lapply(
|
||||
X = data[],
|
||||
FUN = function(x) {
|
||||
if (inherits(x, "Date")) {
|
||||
as.numeric(x) * 864000
|
||||
} else if (inherits(x, "POSIXt")) {
|
||||
as.numeric(x)
|
||||
} else if (inherits(x, "factor")) {
|
||||
as.character(x)
|
||||
} else {
|
||||
x
|
||||
}
|
||||
}
|
||||
)
|
||||
data.table::transpose(l)
|
||||
}
|
|
@ -0,0 +1,88 @@
|
|||
|
||||
# ------------------------------------------------------------------------
|
||||
#
|
||||
# Title : Barcharts
|
||||
# By : Victor
|
||||
# Date : 2018-09-03
|
||||
#
|
||||
# ------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
# Packages ----------------------------------------------------------------
|
||||
|
||||
library(apexcharter)
|
||||
library(ggplot2) # for data
|
||||
library(dplyr) # for count
|
||||
|
||||
|
||||
|
||||
|
||||
# One serie - vertical ----------------------------------------------------
|
||||
|
||||
data(mpg)
|
||||
dat <- count(mpg, manufacturer)
|
||||
|
||||
apexcharter() %>%
|
||||
ax_chart(type = "bar") %>%
|
||||
ax_plotOptions(bar = barOpts(
|
||||
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")
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# One serie - horizontal --------------------------------------------------
|
||||
|
||||
data(mpg)
|
||||
dat <- count(mpg, manufacturer)
|
||||
|
||||
apexcharter() %>%
|
||||
ax_chart(type = "bar") %>%
|
||||
ax_plotOptions(bar = barOpts(
|
||||
horizontal = TRUE,
|
||||
dataLabels = list(
|
||||
position = "top"
|
||||
))
|
||||
) %>%
|
||||
ax_grid(
|
||||
show = TRUE,
|
||||
yaxis = list(lines = list(show = FALSE)),
|
||||
xaxis = list(lines = list(show = TRUE))
|
||||
) %>%
|
||||
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")
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
|
||||
# ------------------------------------------------------------------------
|
||||
#
|
||||
# Title : Timeseries with apexcharter
|
||||
# By : Victor
|
||||
# Date : 2018-09-03
|
||||
#
|
||||
# ------------------------------------------------------------------------
|
||||
|
||||
|
||||
# Packages ----------------------------------------------------------------
|
||||
|
||||
library(apexcharter)
|
||||
library(ggplot2) # data
|
||||
|
||||
|
||||
|
||||
# Data --------------------------------------------------------------------
|
||||
|
||||
data("economics", package = "ggplot2")
|
||||
|
||||
|
||||
|
||||
|
||||
# One serie (class Date) --------------------------------------------------
|
||||
|
||||
|
||||
apexcharter() %>%
|
||||
ax_chart(type = "area", zoom = list(enabled = TRUE)) %>%
|
||||
ax_plotOptions(line = list(curve = "smooth")) %>%
|
||||
ax_dataLabels(enabled = FALSE) %>%
|
||||
ax_series(list(
|
||||
name = "personal savings rate",
|
||||
data = parse_df(economics[, c("date", "psavert")])
|
||||
)) %>%
|
||||
ax_markers(size = 0, style = "full") %>%
|
||||
ax_title(text = "US economic time series", align = "left") %>%
|
||||
ax_subtitle(text = "Data from ggplot2") %>%
|
||||
ax_fill(gradient = list(
|
||||
enabled = TRUE,
|
||||
shadeIntensity = 1,
|
||||
inverseColors = FALSE,
|
||||
opacityFrom = 0,
|
||||
opacityTo = 1,
|
||||
stops = c(0, 2000)
|
||||
)) %>%
|
||||
ax_yaxis(
|
||||
min = 0, max = 20,
|
||||
tickAmount = 4,
|
||||
labels = list(
|
||||
formatter = htmlwidgets::JS("function(val) {return val.toFixed(0);}")
|
||||
),
|
||||
title = "Personal savings rate"
|
||||
) %>%
|
||||
ax_xaxis(type = "datetime", labels = list(format = "d MMM yy"))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# Two series (Date) -------------------------------------------------------
|
||||
|
||||
apexcharter() %>%
|
||||
ax_chart(type = "line", zoom = list(enabled = TRUE)) %>%
|
||||
ax_plotOptions(line = list(curve = "smooth")) %>%
|
||||
ax_dataLabels(enabled = FALSE) %>%
|
||||
ax_series(
|
||||
list(
|
||||
name = "personal savings rate",
|
||||
data = parse_df(economics[, c("date", "psavert")])
|
||||
),
|
||||
list(
|
||||
name = "median duration of unemployment, in weeks,",
|
||||
data = parse_df(economics[, c("date", "uempmed")])
|
||||
)
|
||||
) %>%
|
||||
ax_markers(size = 0, style = "full") %>%
|
||||
ax_title(text = "US economic time series", align = "left") %>%
|
||||
ax_subtitle(text = "Data from ggplot2") %>%
|
||||
ax_yaxis(
|
||||
min = 0, max = 30,
|
||||
tickAmount = 4,
|
||||
labels = list(
|
||||
formatter = htmlwidgets::JS("function(val) {return val.toFixed(0);}")
|
||||
),
|
||||
title = "Personal savings rate"
|
||||
) %>%
|
||||
ax_xaxis(type = "datetime", labels = list(format = "d MMM yy"))
|
||||
|
||||
|
||||
|
|
@ -20,29 +20,29 @@ ax_chart(ax, type = NULL, stacked = NULL, stackType = NULL,
|
|||
|
||||
\item{stackType}{When stacked, should the stacking be percentage based or normal stacking. Available options: \code{"normal"} or \code{"100\%"}}
|
||||
|
||||
\item{animations}{List.}
|
||||
\item{animations}{A list of parameters.}
|
||||
|
||||
\item{background}{Background color for the chart area. If you want to set background with css, use \code{.apexcharts-canvas} to set it.}
|
||||
|
||||
\item{foreColor}{Sets the text color for the chart. Defaults to \code{#373d3f}.}
|
||||
|
||||
\item{dropShadow}{List.}
|
||||
\item{dropShadow}{A list of parameters. See \url{https://apexcharts.com/docs/options/chart/dropshadow/}.}
|
||||
|
||||
\item{events}{List.}
|
||||
\item{events}{A list of parameters. See\url{https://apexcharts.com/docs/options/chart/events/}.}
|
||||
|
||||
\item{offsetX}{}
|
||||
\item{offsetX}{Sets the left offset for chart.}
|
||||
|
||||
\item{offsetY}{}
|
||||
\item{offsetY}{Sets the top offset for chart.}
|
||||
|
||||
\item{scroller}{List.}
|
||||
\item{scroller}{A list of parameters.}
|
||||
|
||||
\item{selection}{List.}
|
||||
\item{selection}{A list of parameters.}
|
||||
|
||||
\item{sparkline}{List. Sparkline hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas. .}
|
||||
|
||||
\item{toolbar}{List.}
|
||||
\item{toolbar}{A list of parameters. See \url{https://apexcharts.com/docs/options/chart/toolbar/}.}
|
||||
|
||||
\item{zoom}{List.}
|
||||
\item{zoom}{A list of parameters. See \url{https://apexcharts.com/docs/options/chart/zoom/}.}
|
||||
|
||||
\item{width}{Width of the chart.}
|
||||
|
||||
|
|
|
@ -17,3 +17,6 @@ A \code{apexcharts} \code{htmlwidget} object.
|
|||
\description{
|
||||
Colors
|
||||
}
|
||||
\note{
|
||||
See \url{https://apexcharts.com/docs/options/colors/}
|
||||
}
|
||||
|
|
|
@ -5,22 +5,26 @@
|
|||
\title{Labels on data}
|
||||
\usage{
|
||||
ax_dataLabels(ax, enabled = NULL, textAnchor = NULL, offsetX = NULL,
|
||||
offsetY = NULL, style = NULL, dropShadow = NULL, ...)
|
||||
offsetY = NULL, style = NULL, dropShadow = NULL,
|
||||
formatter = NULL, ...)
|
||||
}
|
||||
\arguments{
|
||||
\item{ax}{A \code{apexcharts} \code{htmlwidget} object.}
|
||||
|
||||
\item{enabled}{}
|
||||
\item{enabled}{To determine whether to show dataLabels or not.}
|
||||
|
||||
\item{textAnchor}{}
|
||||
\item{textAnchor}{The alignment of text relative to dataLabel’s drawing position.
|
||||
Accepted values \code{"start"}, \code{"middle"} or \code{"end"}.}
|
||||
|
||||
\item{offsetX}{}
|
||||
\item{offsetX}{Sets the left offset for dataLabels.}
|
||||
|
||||
\item{offsetY}{}
|
||||
\item{offsetY}{Sets the top offset for dataLabels.}
|
||||
|
||||
\item{style}{}
|
||||
\item{style}{A list of parameters.}
|
||||
|
||||
\item{dropShadow}{}
|
||||
\item{dropShadow}{A list of parameters.}
|
||||
|
||||
\item{formatter}{The formatter function takes in a single value and allows you to format the value before displaying}
|
||||
|
||||
\item{...}{Additional parameters.}
|
||||
}
|
||||
|
@ -30,3 +34,6 @@ A \code{apexcharts} \code{htmlwidget} object.
|
|||
\description{
|
||||
Labels on data
|
||||
}
|
||||
\note{
|
||||
See \url{https://apexcharts.com/docs/options/datalabels/}
|
||||
}
|
||||
|
|
|
@ -10,17 +10,18 @@ ax_fill(ax, type = NULL, colors = NULL, opacity = NULL,
|
|||
\arguments{
|
||||
\item{ax}{A \code{apexcharts} \code{htmlwidget} object.}
|
||||
|
||||
\item{type}{}
|
||||
\item{type}{Whether to fill the paths with solid colors or gradient.
|
||||
Available options: \code{"solid"}, \code{"gradient"}, \code{"pattern"} or \code{"image"}.}
|
||||
|
||||
\item{colors}{}
|
||||
\item{colors}{Colors to fill the svg paths..}
|
||||
|
||||
\item{opacity}{}
|
||||
\item{opacity}{Opacity of the fill attribute.}
|
||||
|
||||
\item{gradient}{}
|
||||
\item{gradient}{A list of parameters.}
|
||||
|
||||
\item{image}{}
|
||||
\item{image}{A list of parameters.}
|
||||
|
||||
\item{pattern}{}
|
||||
\item{pattern}{A list of parameters.}
|
||||
|
||||
\item{...}{Additional parameters.}
|
||||
}
|
||||
|
@ -30,3 +31,6 @@ A \code{apexcharts} \code{htmlwidget} object.
|
|||
\description{
|
||||
Fill property
|
||||
}
|
||||
\note{
|
||||
See \url{https://apexcharts.com/docs/options/fill/}
|
||||
}
|
||||
|
|
|
@ -19,15 +19,15 @@ ax_grid(ax, show = NULL, borderColor = NULL, strokeDashArray = NULL,
|
|||
|
||||
\item{position}{Whether to place grid behind chart paths of in front. Available options for position: \code{"front"} or \code{"back"}}
|
||||
|
||||
\item{xaxis}{List.}
|
||||
\item{xaxis}{A list of parameters.}
|
||||
|
||||
\item{yaxis}{List.}
|
||||
\item{yaxis}{A list of parameters.}
|
||||
|
||||
\item{row}{List.}
|
||||
\item{row}{A list of parameters.}
|
||||
|
||||
\item{column}{List.}
|
||||
\item{column}{A list of parameters.}
|
||||
|
||||
\item{padding}{List.}
|
||||
\item{padding}{A list of parameters.}
|
||||
|
||||
\item{...}{Additional parameters.}
|
||||
}
|
||||
|
@ -37,3 +37,6 @@ A \code{apexcharts} \code{htmlwidget} object.
|
|||
\description{
|
||||
Add grids on chart
|
||||
}
|
||||
\note{
|
||||
See \url{https://apexcharts.com/docs/options/grid/}
|
||||
}
|
||||
|
|
|
@ -18,3 +18,6 @@ A \code{apexcharts} \code{htmlwidget} object.
|
|||
\description{
|
||||
Alternative axis labels
|
||||
}
|
||||
\note{
|
||||
See \url{https://apexcharts.com/docs/options/labels/}
|
||||
}
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
\alias{ax_legend}
|
||||
\title{Legend properties}
|
||||
\usage{
|
||||
ax_legend(ax, show = NULL, position = NULL, horizontFalAlign = NULL,
|
||||
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,
|
||||
|
@ -17,6 +17,8 @@ ax_legend(ax, show = NULL, position = NULL, horizontFalAlign = 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{verticalAlign}{Available options for vertical alignment: \code{"top"}, \code{"middle"}, \code{"bottom"}}
|
||||
|
||||
\item{fontSize}{Sets the fontSize of legend text elements}
|
||||
|
@ -49,8 +51,6 @@ when hovered on legend item, it will highlight the paths of the hovered series i
|
|||
\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}{Available options for horizontal alignment: \code{"right"}, \code{"center"}, \code{"left"}.}
|
||||
}
|
||||
\value{
|
||||
A \code{apexcharts} \code{htmlwidget} object.
|
||||
|
@ -58,3 +58,6 @@ A \code{apexcharts} \code{htmlwidget} object.
|
|||
\description{
|
||||
Legend properties
|
||||
}
|
||||
\note{
|
||||
See \url{https://apexcharts.com/docs/options/legend/}
|
||||
}
|
||||
|
|
|
@ -42,3 +42,6 @@ A \code{apexcharts} \code{htmlwidget} object.
|
|||
\description{
|
||||
Markers properties
|
||||
}
|
||||
\note{
|
||||
See \url{https://apexcharts.com/docs/options/markers/}
|
||||
}
|
||||
|
|
|
@ -1,32 +0,0 @@
|
|||
% Generated by roxygen2: do not edit by hand
|
||||
% Please edit documentation in R/apex-utils.R
|
||||
\name{ax_noData}
|
||||
\alias{ax_noData}
|
||||
\title{No data specification}
|
||||
\usage{
|
||||
ax_noData(ax, text = NULL, align = NULL, verticalAlign = NULL,
|
||||
offsetX = NULL, offsetY = NULL, style = NULL, ...)
|
||||
}
|
||||
\arguments{
|
||||
\item{ax}{A \code{apexcharts} \code{htmlwidget} object.}
|
||||
|
||||
\item{text}{}
|
||||
|
||||
\item{align}{}
|
||||
|
||||
\item{verticalAlign}{}
|
||||
|
||||
\item{offsetX}{}
|
||||
|
||||
\item{offsetY}{}
|
||||
|
||||
\item{style}{}
|
||||
|
||||
\item{...}{Additional parameters.}
|
||||
}
|
||||
\value{
|
||||
A \code{apexcharts} \code{htmlwidget} object.
|
||||
}
|
||||
\description{
|
||||
No data specification
|
||||
}
|
|
@ -9,7 +9,7 @@ ax_responsive(ax, ...)
|
|||
\arguments{
|
||||
\item{ax}{A \code{apexcharts} \code{htmlwidget} object.}
|
||||
|
||||
\item{...}{}
|
||||
\item{...}{Additional parameters.}
|
||||
}
|
||||
\value{
|
||||
A \code{apexcharts} \code{htmlwidget} object.
|
||||
|
@ -17,3 +17,6 @@ A \code{apexcharts} \code{htmlwidget} object.
|
|||
\description{
|
||||
Responsive options
|
||||
}
|
||||
\note{
|
||||
See \url{https://apexcharts.com/docs/options/responsive/}
|
||||
}
|
||||
|
|
|
@ -9,11 +9,11 @@ ax_states(ax, normal = NULL, hover = NULL, active = NULL, ...)
|
|||
\arguments{
|
||||
\item{ax}{A \code{apexcharts} \code{htmlwidget} object.}
|
||||
|
||||
\item{normal}{List.}
|
||||
\item{normal}{A list of parameters.}
|
||||
|
||||
\item{hover}{List.}
|
||||
\item{hover}{A list of parameters.}
|
||||
|
||||
\item{active}{List.}
|
||||
\item{active}{A list of parameters.}
|
||||
|
||||
\item{...}{Additional parameters.}
|
||||
}
|
||||
|
@ -23,3 +23,6 @@ A \code{apexcharts} \code{htmlwidget} object.
|
|||
\description{
|
||||
Charts' states
|
||||
}
|
||||
\note{
|
||||
See \url{https://apexcharts.com/docs/options/states/}
|
||||
}
|
||||
|
|
|
@ -35,3 +35,6 @@ A \code{apexcharts} \code{htmlwidget} object.
|
|||
\description{
|
||||
Stroke properties
|
||||
}
|
||||
\note{
|
||||
See \url{https://apexcharts.com/docs/options/stroke/}
|
||||
}
|
||||
|
|
|
@ -33,3 +33,6 @@ A \code{apexcharts} \code{htmlwidget} object.
|
|||
\description{
|
||||
Chart's subtitle
|
||||
}
|
||||
\note{
|
||||
See \url{https://apexcharts.com/docs/options/subtitle/}
|
||||
}
|
||||
|
|
|
@ -11,7 +11,7 @@ ax_theme(ax, palette = NULL, monochrome = NULL, ...)
|
|||
|
||||
\item{palette}{Character. Available palettes: \code{"palette1"} to \code{"palette10"}.}
|
||||
|
||||
\item{monochrome}{List.}
|
||||
\item{monochrome}{A list of parameters.}
|
||||
|
||||
\item{...}{Additional parameters.}
|
||||
}
|
||||
|
@ -21,3 +21,6 @@ A \code{apexcharts} \code{htmlwidget} object.
|
|||
\description{
|
||||
Theme for charts
|
||||
}
|
||||
\note{
|
||||
See \url{https://apexcharts.com/docs/options/theme/}
|
||||
}
|
||||
|
|
|
@ -33,3 +33,6 @@ A \code{apexcharts} \code{htmlwidget} object.
|
|||
\description{
|
||||
Chart's title
|
||||
}
|
||||
\note{
|
||||
See \url{https://apexcharts.com/docs/options/title/}
|
||||
}
|
||||
|
|
|
@ -27,21 +27,21 @@ ax_tooltip(ax, enabled = NULL, shared = NULL, followCursor = NULL,
|
|||
|
||||
\item{fillSeriesColor}{Logical. When enabled, fill the tooltip background with the corresponding series color.}
|
||||
|
||||
\item{onDatasetHover}{List.}
|
||||
\item{onDatasetHover}{A list of parameters.}
|
||||
|
||||
\item{theme}{List.}
|
||||
\item{theme}{A list of parameters.}
|
||||
|
||||
\item{x}{List.}
|
||||
\item{x}{A list of parameters.}
|
||||
|
||||
\item{y}{List.}
|
||||
\item{y}{A list of parameters.}
|
||||
|
||||
\item{z}{List.}
|
||||
\item{z}{A list of parameters.}
|
||||
|
||||
\item{marker}{List.}
|
||||
\item{marker}{A list of parameters.}
|
||||
|
||||
\item{items}{List.}
|
||||
\item{items}{A list of parameters.}
|
||||
|
||||
\item{fixed}{List.}
|
||||
\item{fixed}{A list of parameters.}
|
||||
|
||||
\item{...}{Additional parameters.}
|
||||
}
|
||||
|
@ -51,3 +51,6 @@ A \code{apexcharts} \code{htmlwidget} object.
|
|||
\description{
|
||||
Tooltip options
|
||||
}
|
||||
\note{
|
||||
See \url{https://apexcharts.com/docs/options/tooltip/}
|
||||
}
|
||||
|
|
|
@ -17,11 +17,11 @@ ax_xaxis(ax, type = NULL, categories = NULL, labels = NULL,
|
|||
|
||||
\item{categories}{Categories are labels which are displayed on the x-axis.}
|
||||
|
||||
\item{labels}{List.}
|
||||
\item{labels}{A list of parameters.}
|
||||
|
||||
\item{axisBorder}{List.}
|
||||
\item{axisBorder}{A list of parameters.}
|
||||
|
||||
\item{axisTicks}{List.}
|
||||
\item{axisTicks}{A list of parameters.}
|
||||
|
||||
\item{tickAmount}{Number of Tick Intervals to show.}
|
||||
|
||||
|
@ -37,11 +37,11 @@ similar to an absolutely positioned element. Set the offsetX and offsetY then to
|
|||
|
||||
\item{position}{Setting this option allows you to change the x-axis position. Available options: \code{"top"} and \code{"bottom"}.}
|
||||
|
||||
\item{title}{List.}
|
||||
\item{title}{A list of parameters.}
|
||||
|
||||
\item{crosshairs}{List.}
|
||||
\item{crosshairs}{A list of parameters.}
|
||||
|
||||
\item{tooltip}{List.}
|
||||
\item{tooltip}{A list of parameters.}
|
||||
|
||||
\item{...}{Additional parameters.}
|
||||
}
|
||||
|
@ -51,3 +51,6 @@ A \code{apexcharts} \code{htmlwidget} object.
|
|||
\description{
|
||||
X-axis options
|
||||
}
|
||||
\note{
|
||||
See \url{https://apexcharts.com/docs/options/xaxis/}
|
||||
}
|
||||
|
|
|
@ -23,17 +23,17 @@ ax_yaxis(ax, opposite = NULL, tickAmount = NULL, max = NULL,
|
|||
\item{floating}{Logical. Floating takes y-axis is taken out of normal flow and places y-axis on svg element directly,
|
||||
similar to an absolutely positioned element. Set the offsetX and offsetY then to adjust the position manually}
|
||||
|
||||
\item{labels}{List.}
|
||||
\item{labels}{A list of parameters.}
|
||||
|
||||
\item{axisBorder}{List.}
|
||||
\item{axisBorder}{A list of parameters.}
|
||||
|
||||
\item{axisTicks}{List.}
|
||||
\item{axisTicks}{A list of parameters.}
|
||||
|
||||
\item{title}{List.}
|
||||
\item{title}{A list of parameters.}
|
||||
|
||||
\item{tooltip}{List.}
|
||||
\item{tooltip}{A list of parameters.}
|
||||
|
||||
\item{crosshairs}{List.}
|
||||
\item{crosshairs}{A list of parameters.}
|
||||
|
||||
\item{...}{Additional parameters.}
|
||||
}
|
||||
|
@ -43,3 +43,6 @@ A \code{apexcharts} \code{htmlwidget} object.
|
|||
\description{
|
||||
Y-axis options
|
||||
}
|
||||
\note{
|
||||
See \url{https://apexcharts.com/docs/options/yaxis/}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,14 @@
|
|||
% Generated by roxygen2: do not edit by hand
|
||||
% Please edit documentation in R/parse-data.R
|
||||
\name{parse_df}
|
||||
\alias{parse_df}
|
||||
\title{Convert a \code{data.frame} to a \code{list}}
|
||||
\usage{
|
||||
parse_df(data)
|
||||
}
|
||||
\arguments{
|
||||
\item{data}{A \code{data.frame} or an object coercible to \code{data.frame}.}
|
||||
}
|
||||
\description{
|
||||
Convert data to a format suitable for ApexCharts.js
|
||||
}
|
|
@ -1,32 +0,0 @@
|
|||
% Generated by roxygen2: do not edit by hand
|
||||
% Please edit documentation in R/apex-options.R
|
||||
\name{scrollerOpts}
|
||||
\alias{scrollerOpts}
|
||||
\title{Options for scroller}
|
||||
\usage{
|
||||
scrollerOpts(enabled = NULL, height = NULL, track = NULL,
|
||||
thumb = NULL, scrollButtons = NULL, padding = NULL,
|
||||
offsetX = NULL, offsetY = NULL, ...)
|
||||
}
|
||||
\arguments{
|
||||
\item{enabled}{}
|
||||
|
||||
\item{height}{}
|
||||
|
||||
\item{track}{}
|
||||
|
||||
\item{thumb}{}
|
||||
|
||||
\item{scrollButtons}{}
|
||||
|
||||
\item{padding}{}
|
||||
|
||||
\item{offsetX}{}
|
||||
|
||||
\item{offsetY}{}
|
||||
|
||||
\item{...}{}
|
||||
}
|
||||
\description{
|
||||
Options for scroller
|
||||
}
|
|
@ -1,29 +0,0 @@
|
|||
% Generated by roxygen2: do not edit by hand
|
||||
% Please edit documentation in R/apex-options.R
|
||||
\name{selectionOpts}
|
||||
\alias{selectionOpts}
|
||||
\title{Selection options}
|
||||
\usage{
|
||||
selectionOpts(enabled = NULL, type = NULL, selectedPoints = NULL,
|
||||
fill = NULL, stroke = NULL, xaxis = NULL, yaxis = NULL, ...)
|
||||
}
|
||||
\arguments{
|
||||
\item{enabled}{}
|
||||
|
||||
\item{type}{}
|
||||
|
||||
\item{selectedPoints}{}
|
||||
|
||||
\item{fill}{}
|
||||
|
||||
\item{stroke}{}
|
||||
|
||||
\item{xaxis}{}
|
||||
|
||||
\item{yaxis}{}
|
||||
|
||||
\item{...}{}
|
||||
}
|
||||
\description{
|
||||
Selection options
|
||||
}
|
Loading…
Reference in New Issue