diff --git a/docs/articles/apexcharter.html b/docs/articles/apexcharter.html index f87a192..e743288 100644 --- a/docs/articles/apexcharter.html +++ b/docs/articles/apexcharter.html @@ -162,7 +162,7 @@
vignettes/apexcharter.Rmd
apexcharter.Rmd
Flipping coordinates can be done by using type = "bar"
:
Flipping coordinates can be done by using type = "bar"
:
To create a dodge bar charts, use aesthetic fill
:
To create a dodge bar charts, use aesthetic fill
:
n_manufac_year <- count(mpg, manufacturer, year)
apex(data = n_manufac_year, type = "column", mapping = aes(x = manufacturer, y = n, fill = year))
For stacked bar charts, specify option stacked
in ax_chart
:
For stacked bar charts, specify option stacked
in ax_chart
:
apex(data = n_manufac_year, type = "column", mapping = aes(x = manufacturer, y = n, fill = year)) %>%
ax_chart(stacked = TRUE)
To represent several lines, use a data.frame
in long format and the group
aesthetic:
To represent several lines, use a data.frame
in long format and the group
aesthetic:
data("economics_long")
economics_long <- economics_long %>%
@@ -224,15 +224,15 @@
apex(data = economics_long, type = "line", mapping = aes(x = date, y = value01, group = variable)) %>%
ax_yaxis(decimalsInFloat = 2) # number of decimals to keep
Create area charts with type = "area"
:
Create area charts with type = "area"
:
apex(data = economics_long, type = "area", mapping = aes(x = date, y = value01, fill = variable)) %>%
ax_yaxis(decimalsInFloat = 2) %>% # number of decimals to keep
ax_chart(stacked = TRUE) %>%
ax_yaxis(max = 4, tickAmount = 4)
Simple bar charts can be created with:
- -Color points according to a third variable:
+ +Color points according to a third variable:
- -And change point size using z
aesthetics:
And change point size using z
aesthetics:
Simple radial charts can be created with (here we pass values directly in aes
, but you can use a data.frame
) :
Multi radial chart (more than one value):
+ +Multi radial chart (more than one value):
fruits <- data.frame(
name = c('Apples', 'Oranges', 'Bananas', 'Berries'),
@@ -280,8 +280,8 @@
)
apex(data = fruits, type = "radialBar", mapping = aes(x = name, y = value))
mtcars$model <- rownames(mtcars)
apex(data = head(mtcars), type = "radar", mapping = aes(x = model, y = qsec))
With a grouping variable:
+ +With a grouping variable:
# extremely complicated reshaping
new_mtcars <- reshape(
@@ -306,8 +306,8 @@
)
apex(data = new_mtcars, type = "radar", mapping = aes(x = model, y = value, group = time))
Final result looks like :
bars
View full code
View full code
data("mpg", package = "ggplot2")
@@ -351,8 +351,8 @@
Final result looks like :
lines
-
-View full code
+
+View full code
data("unhcr_ts")
@@ -523,8 +523,8 @@
Final result looks like :
scatter
-
-View full code
+
+View full code
data("gapminder", package = "gapminder")
@@ -740,8 +740,8 @@
Final result looks like :
heatmap
-
-View full code
+
+View full code
data("vaccines", package = "highcharter")
diff --git a/docs/articles/articles/advanced-configuration_files/apexcharter-css-0.1.0/apexcharter.css b/docs/articles/articles/advanced-configuration_files/apexcharter-css-0.1.0/apexcharter.css
index a9ba20b..814316a 100644
--- a/docs/articles/articles/advanced-configuration_files/apexcharter-css-0.1.0/apexcharter.css
+++ b/docs/articles/articles/advanced-configuration_files/apexcharter-css-0.1.0/apexcharter.css
@@ -11,18 +11,63 @@
}
.apexcharter-facet-col-label {
- background:#E6E6E6;
+ background:#E6E6E6;
text-align: center;
- font-weight: bold;
+ font-weight: bold;
line-height: 30px;
}
.apexcharter-facet-row-label {
- background:#E6E6E6;
- text-align: center;
+ background:#E6E6E6;
+ text-align: center;
font-weight: bold;
- writing-mode: vertical-rl;
- text-orientation: mixed;
+ writing-mode: vertical-rl;
+ text-orientation: mixed;
line-height: 30px;
}
+
+.apexcharter-facet-subtitle {
+ font-family: Helvetica, Arial, sans-serif;
+ margin-bottom: 5px;
+}
+
+.apexcharter-facet-title {
+ font-family: Helvetica, Arial, sans-serif;
+ margin-bottom: 5px;
+}
+
+.apexcharter-facet-yaxis-title {
+ font-family: Helvetica, Arial, sans-serif;
+ text-align: center;
+ writing-mode: vertical-rl;
+ text-orientation: mixed;
+ line-height: 30px;
+ height: 100%;
+}
+
+.apexcharter-facet-xaxis-title {
+ font-family: Helvetica, Arial, sans-serif;
+ text-align: center;
+ line-height: 30px;
+ width: 100%;
+}
+
+.apexcharter-facet-rotate180 {
+ transform: rotate(180deg);
+ /* Legacy vendor prefixes that you probably don't need... */
+ /* Safari */
+ -webkit-transform: rotate(180deg);
+ /* Firefox */
+ -moz-transform: rotate(180deg);
+ /* IE */
+ -ms-transform: rotate(180deg);
+ /* Opera */
+ -o-transform: rotate(180deg);
+ /* Internet Explorer */
+ /*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);*/
+}
+
+
+
+
diff --git a/docs/articles/chart-options.html b/docs/articles/chart-options.html
index 1a9c715..902bb92 100644
--- a/docs/articles/chart-options.html
+++ b/docs/articles/chart-options.html
@@ -191,8 +191,8 @@
x = "Cut",
y = "Count"
)
-
-If you more control (font size, alignment, …), you can use ax_title()
, ax_subtitle()
, ax_xaxis()
and ax_yaxis()
, as described below.
+
+If you more control (font size, alignment, …), you can use ax_title()
, ax_subtitle()
, ax_xaxis()
and ax_yaxis()
, as described below.
@@ -200,8 +200,8 @@
-
-
You can set some options, for example:
+
+You can set some options, for example:
apex(data = n_cut, type = "column", mapping = aes(x = cut, y = n)) %>%
ax_title(
@@ -209,8 +209,8 @@
align = "center",
style = list(fontSize = "22px", fontWeight = 700)
)
-
-Full list of parameters is available here : https://apexcharts.com/docs/options/title/
+
+Full list of parameters is available here : https://apexcharts.com/docs/options/title/
@@ -219,8 +219,8 @@
apex(data = n_cut, type = "column", mapping = aes(x = cut, y = n)) %>%
ax_title(text = "Cut distribution") %>%
ax_subtitle(text = "Data from ggplot2")
-
-With same options than for title:
+
+With same options than for title:
apex(data = n_cut, type = "column", mapping = aes(x = cut, y = n)) %>%
ax_title(
@@ -233,8 +233,8 @@
align = "center",
style = list(fontSize = "16px", fontWeight = 400, color = "#BDBDBD")
)
-
-Full list of parameters is available here : https://apexcharts.com/docs/options/subtitle/
+
+Full list of parameters is available here : https://apexcharts.com/docs/options/subtitle/
@@ -243,8 +243,8 @@
apex(data = n_cut, type = "column", mapping = aes(x = cut, y = n)) %>%
ax_yaxis(title = list(text = "Count")) %>%
ax_xaxis(title = list(text = "Cut"))
-
-With some options:
+
+With some options:
-
-
+
+
Classic line:
- -Spline curve:
+ +Spline curve:
apex(data = economics, type = "line", mapping = aes(x = date, y = uempmed)) %>%
ax_stroke(curve = "smooth")
Steps chart:
+ +Steps chart:
- - + +Solid area color:
+ +Solid area color:
apex(data = economics, type = "area", mapping = aes(x = date, y = uempmed)) %>%
ax_fill(type = "solid", opacity = 1)
Line width:
+ +Line width:
apex(data = economics, type = "line", mapping = aes(x = date, y = uempmed)) %>%
ax_stroke(width = 1)
Dotted line
+ +Dotted line
apex(data = economics, type = "line", mapping = aes(x = date, y = uempmed)) %>%
ax_stroke(dashArray = 6)
apex(data = tail(economics, 20), type = "line", mapping = aes(x = date, y = uempmed)) %>%
ax_markers(size = 6)
Add labels over points
+ +Add labels over points
apex(data = tail(economics, 20), type = "line", mapping = aes(x = date, y = uempmed)) %>%
ax_markers(size = 6) %>%
ax_dataLabels(enabled = TRUE)
+ + - - + +
Create a grid of charts according to a variable of the data with ax_facet_wrap()
:
-data("mpg", package = "ggplot2")
+library(apexcharter)
+data("mpg", package = "ggplot2")
apex(mpg, aes(displ, cty), type = "scatter") %>%
+ ax_xaxis(labels = list(formatter = format_num(".0f"))) %>%
+ ax_labs(
+ title = "Facet wrap example",
+ subtitle = "mpg data from ggplot2",
+ x = "engine displacement, in litres",
+ y = "city miles per gallon"
+ ) %>%
ax_facet_wrap(vars(drv), ncol = 2)
Synchronized line charts with free y-axis :
-data("economics_long", package = "ggplot2")
+library(apexcharter)
+data("economics_long", package = "ggplot2")
apex(economics_long, aes(date, value), type = "line", synchronize = "sync-it") %>%
ax_yaxis(
@@ -215,13 +228,13 @@
) %>%
ax_tooltip(x = list(format = "yyyy")) %>%
ax_facet_wrap(vars(variable), scales = "free_y")
Don’t forget to set a minWidth
for y axis labels when synchronizing charts, otherwise unexpected results can occurs.
Create a matrix of charts defined by row and column faceting variables with ax_facet_grid()
:
-data("mpg", package = "ggplot2")
+library(apexcharter)
+data("mpg", package = "ggplot2")
apex(mpg, aes(displ, cty), type = "scatter") %>%
+ ax_xaxis(labels = list(formatter = format_num(".0f"))) %>%
+ ax_labs(
+ title = "Facet grid example",
+ subtitle = "mpg data from ggplot2",
+ x = "engine displacement, in litres",
+ y = "city miles per gallon"
+ ) %>%
ax_facet_grid(rows = vars(drv), cols = vars(year))
You can construct a grid of (unrelated) charts with apex_grid()
, construct your charts independently then assemble them in the grid:
-a1 <- apex(mpg, aes(manufacturer), type = "bar")
+library(apexcharter)
+data("mpg", package = "ggplot2")
+
+# Construct 3 charts
+a1 <- apex(mpg, aes(manufacturer), type = "bar")
a2 <- apex(mpg, aes(trans), type = "column")
a3 <- apex(mpg, aes(drv), type = "pie")
+# Assemble them in a grid
apex_grid(
a1, a2, a3,
grid_area = c("1 / 1 / 3 / 2", "1 / 2 / 2 / 4", "2 / 2 / 3 / 4"),
@@ -265,18 +295,18 @@
nrow = 2,
height = "600px"
)
grid_area
argument allow to specify space occupied by each chart, you can generate interactively your grid template here.
Value server-side will be available through input$click
.
Value server-side will be available through input$click
.
Depending on the type of graphic, you can retrieve :
More examples are available with:
+ +More examples are available with:
run_input_demo("click")
data("economics", package = "ggplot2")
apex(economics, aes(date, psavert), type = "line", height = "250px") %>%
set_input_zoom("zoom")
Value server-side will be available through input$zoom
under the form :
Value server-side will be available through input$zoom
under the form :
#> $x
#> $x$min
#> [1] "1981-10-24 15:41:16 UTC"
@@ -299,8 +299,8 @@
apex(economics, aes(date, psavert), type = "line", height = "250px") %>%
set_input_selection("selection")
-
-Value server-side will be available through input$selection
under the form :
+
+Value server-side will be available through input$selection
under the form :
#> $x
#> $x$min
#> [1] "1981-10-24 15:41:16 UTC"
@@ -315,13 +315,13 @@
xmin = format_date("1980-01-01"),
xmax = format_date("1985-01-01")
)
-
-Above selection is only made possible on x-axis, but in case of scatter chart for example, you can select a rectangle (both axis):
+
+Above selection is only made possible on x-axis, but in case of scatter chart for example, you can select a rectangle (both axis):
apex(iris, aes(Sepal.Length, Sepal.Width), type = "scatter", height = "250px") %>%
set_input_selection("selection_scatter", type = "xy")
-
-In this case, input value will look like this:
+
+In this case, input value will look like this:
#> $x
#> $x$min
#> [1] 5.130187
diff --git a/docs/articles/shiny-integration_files/apexcharter-css-0.1.0/apexcharter.css b/docs/articles/shiny-integration_files/apexcharter-css-0.1.0/apexcharter.css
index a9ba20b..814316a 100644
--- a/docs/articles/shiny-integration_files/apexcharter-css-0.1.0/apexcharter.css
+++ b/docs/articles/shiny-integration_files/apexcharter-css-0.1.0/apexcharter.css
@@ -11,18 +11,63 @@
}
.apexcharter-facet-col-label {
- background:#E6E6E6;
+ background:#E6E6E6;
text-align: center;
- font-weight: bold;
+ font-weight: bold;
line-height: 30px;
}
.apexcharter-facet-row-label {
- background:#E6E6E6;
- text-align: center;
+ background:#E6E6E6;
+ text-align: center;
font-weight: bold;
- writing-mode: vertical-rl;
- text-orientation: mixed;
+ writing-mode: vertical-rl;
+ text-orientation: mixed;
line-height: 30px;
}
+
+.apexcharter-facet-subtitle {
+ font-family: Helvetica, Arial, sans-serif;
+ margin-bottom: 5px;
+}
+
+.apexcharter-facet-title {
+ font-family: Helvetica, Arial, sans-serif;
+ margin-bottom: 5px;
+}
+
+.apexcharter-facet-yaxis-title {
+ font-family: Helvetica, Arial, sans-serif;
+ text-align: center;
+ writing-mode: vertical-rl;
+ text-orientation: mixed;
+ line-height: 30px;
+ height: 100%;
+}
+
+.apexcharter-facet-xaxis-title {
+ font-family: Helvetica, Arial, sans-serif;
+ text-align: center;
+ line-height: 30px;
+ width: 100%;
+}
+
+.apexcharter-facet-rotate180 {
+ transform: rotate(180deg);
+ /* Legacy vendor prefixes that you probably don't need... */
+ /* Safari */
+ -webkit-transform: rotate(180deg);
+ /* Firefox */
+ -moz-transform: rotate(180deg);
+ /* IE */
+ -ms-transform: rotate(180deg);
+ /* Opera */
+ -o-transform: rotate(180deg);
+ /* Internet Explorer */
+ /*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);*/
+}
+
+
+
+
diff --git a/docs/articles/spark-box.html b/docs/articles/spark-box.html
index 15e655d..78bc31f 100644
--- a/docs/articles/spark-box.html
+++ b/docs/articles/spark-box.html
@@ -185,8 +185,8 @@
title = mean(spark_data$var1),
subtitle = "Variable 1"
)
-
-With more styles :
+
+With more styles :
spark_box(
data = spark_data,
@@ -196,8 +196,8 @@
title_style = list(color = "#FFF"),
subtitle_style = list(color = "#FFF")
)
-
-You can also use spark boxes in Shiny application, use code to launch an example :
+
+You can also use spark boxes in Shiny application, use code to launch an example :
run_sparkbox_demo()
![spark-box](figures/spark-box.png)
diff --git a/docs/articles/spark-box_files/apexcharter-css-0.1.0/apexcharter.css b/docs/articles/spark-box_files/apexcharter-css-0.1.0/apexcharter.css
index a9ba20b..814316a 100644
--- a/docs/articles/spark-box_files/apexcharter-css-0.1.0/apexcharter.css
+++ b/docs/articles/spark-box_files/apexcharter-css-0.1.0/apexcharter.css
@@ -11,18 +11,63 @@
}
.apexcharter-facet-col-label {
- background:#E6E6E6;
+ background:#E6E6E6;
text-align: center;
- font-weight: bold;
+ font-weight: bold;
line-height: 30px;
}
.apexcharter-facet-row-label {
- background:#E6E6E6;
- text-align: center;
+ background:#E6E6E6;
+ text-align: center;
font-weight: bold;
- writing-mode: vertical-rl;
- text-orientation: mixed;
+ writing-mode: vertical-rl;
+ text-orientation: mixed;
line-height: 30px;
}
+
+.apexcharter-facet-subtitle {
+ font-family: Helvetica, Arial, sans-serif;
+ margin-bottom: 5px;
+}
+
+.apexcharter-facet-title {
+ font-family: Helvetica, Arial, sans-serif;
+ margin-bottom: 5px;
+}
+
+.apexcharter-facet-yaxis-title {
+ font-family: Helvetica, Arial, sans-serif;
+ text-align: center;
+ writing-mode: vertical-rl;
+ text-orientation: mixed;
+ line-height: 30px;
+ height: 100%;
+}
+
+.apexcharter-facet-xaxis-title {
+ font-family: Helvetica, Arial, sans-serif;
+ text-align: center;
+ line-height: 30px;
+ width: 100%;
+}
+
+.apexcharter-facet-rotate180 {
+ transform: rotate(180deg);
+ /* Legacy vendor prefixes that you probably don't need... */
+ /* Safari */
+ -webkit-transform: rotate(180deg);
+ /* Firefox */
+ -moz-transform: rotate(180deg);
+ /* IE */
+ -ms-transform: rotate(180deg);
+ /* Opera */
+ -o-transform: rotate(180deg);
+ /* Internet Explorer */
+ /*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);*/
+}
+
+
+
+
diff --git a/docs/articles/sync-charts.html b/docs/articles/sync-charts.html
index 0792adf..e0c57f1 100644
--- a/docs/articles/sync-charts.html
+++ b/docs/articles/sync-charts.html
@@ -207,9 +207,9 @@
) %>%
ax_tooltip(x = list(format = "yyyy"))
-
-
-Note that you have to set a common minWidth
for y axis labels. Different width yaxis in different charts will produce incorrect results when hovering or interacting.
Note that you have to set a common minWidth
for y axis labels. Different width yaxis in different charts will produce incorrect results when hovering or interacting.
For an example in Shiny, you can run:
run_sync_demo()
Htmlwidget for apexcharts.js : A modern JavaScript charting library to build interactive charts and visualizations with simple API. See the online demo for examples.
- +⚠️ Use RStudio >= 1.2 to properly display charts
NEWS.md
ax_facet_wrap()
and ax_facet_grid()
to create faceting charts.apex_grid()
to combine several charts in a grid.