# Syncing charts

    library(apexcharter)
    data("economics", package = "ggplot2")

## Sync charts

With Apexcharts you can sync (tooltip, zoom) several charts together by providing a group and id to each charts. This works in Shiny and Markdown. Here a basic example :

    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
      ) %>%
      ax_yaxis(
        labels = list(
          minWidth = 15
        )
      )

    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
      ) %>%
      ax_yaxis(
        labels = list(
          minWidth = 15
        )
      )

## Brush chart

Create a brush chart to navigate into a synced chart.

    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))