99 lines
2.1 KiB
Plaintext
99 lines
2.1 KiB
Plaintext
---
|
|
title: "Syncing charts"
|
|
output: rmarkdown::html_vignette
|
|
vignette: >
|
|
%\VignetteIndexEntry{Syncing charts}
|
|
%\VignetteEngine{knitr::rmarkdown}
|
|
%\VignetteEncoding{UTF-8}
|
|
---
|
|
|
|
```{r, include = FALSE}
|
|
knitr::opts_chunk$set(
|
|
collapse = TRUE,
|
|
comment = "#>"
|
|
)
|
|
```
|
|
|
|
```{r setup}
|
|
library(apexcharter)
|
|
data("economics", package = "ggplot2")
|
|
```
|
|
|
|
|
|
## Sync charts
|
|
|
|
With [Apexcharts](https://apexcharts.com) you can sync (tooltip, zoom) several charts together by providing a group and id to each charts. This works in Shiny and Markdown. Here an example where we create two charts, tooltip will be displayed on both charts when you hover one, and if you zoom on one, the other one will be synced :
|
|
|
|
```{r example-1, eval=FALSE}
|
|
apex(
|
|
data = tail(economics, 150),
|
|
mapping = aes(x = date, y = pce),
|
|
type = "line"
|
|
) %>%
|
|
ax_chart(
|
|
group = "economics", id = "pce" # <- define common group and unique id
|
|
)
|
|
|
|
apex(
|
|
data = tail(economics, 150),
|
|
mapping = aes(x = date, y = psavert),
|
|
type = "line"
|
|
) %>%
|
|
ax_chart(
|
|
group = "economics", id = "psavert" # <- define common group and unique id
|
|
)
|
|
```
|
|
|
|
|
|
```{r run-example-1, echo=FALSE, ref.label="example-1"}
|
|
|
|
```
|
|
|
|
|
|
|
|
## Brush chart
|
|
|
|
Create a brush chart to navigate into a synced chart : use the chart below to navigate in the chart above.
|
|
|
|
```{r example-2, eval=FALSE}
|
|
apex(
|
|
data = economics,
|
|
mapping = aes(x = date, y = psavert),
|
|
type = "line"
|
|
) %>%
|
|
ax_chart(
|
|
id = "target-chart", # <-- define target id here
|
|
toolbar = list(
|
|
autoSelected = "pan",
|
|
show = FALSE
|
|
)
|
|
)
|
|
|
|
apex(
|
|
data = economics,
|
|
mapping = aes(x = date, y = psavert),
|
|
type = "line",
|
|
height = "130px"
|
|
) %>%
|
|
ax_chart(
|
|
brush = list(
|
|
target = "target-chart", # <-- use target id here
|
|
enabled = TRUE
|
|
),
|
|
offsetY = -20,
|
|
selection = list(
|
|
enabled = TRUE, # <-- enable selection and define starting range
|
|
xaxis = list(
|
|
min = format_date(economics$date[1]),
|
|
max = format_date(economics$date[100])
|
|
)
|
|
)
|
|
) %>%
|
|
ax_xaxis(labels = list(show = FALSE)) %>%
|
|
ax_yaxis(labels = list(show = FALSE))
|
|
```
|
|
|
|
|
|
```{r run-example-2, echo=FALSE, ref.label="example-2"}
|
|
|
|
``` |