# Shiny integration

    library(apexcharter)

## Charts

### Create and update (or destroy and re-create)

When a graph has been generated in Shiny, if the values change (via a reactive function), the graph is not regenerated, only the data is updated. If you have changed specific options in the graphic (such as maximum y axis value, chart’s title, …) these will not be updated. This behavior can be controlled with `auto_update` argument (available in `apexchart()` and `apex()`) :

By default, `auto_update` is `TRUE` :

    apex(..., auto_update = TRUE)

If you want to re-create the whole chart, set the option to `FALSE`:

    apex(..., auto_update = FALSE)

You can also use `config_update()` to specify what to update :

    apex(..., auto_update = config_update(update_options = TRUE))

### Proxy

A proxy is also implemented to update charts manually server-side. You can update data:

    output$my_chart <- renderApexchart({
      apex(data = isolate(data_reactive()), ..., auto_update = FALSE)
    })

    observeEvent(input$update, {
      apexchartProxy("my_chart") %>%
        ax_proxy_series(data_reactive())
    })

Be sure to use `shiny::isolate()` to block any reactivity in `renderApexchart` function and to set `auto_update` to FALSE to prevent updating twice. Then you can use in an observe function (or any reactive function) `apexchartProxy()` with the output id to get the chart instance and `ax_proxy_series()` to update data.

If you want to update chart’s options, use :

    observeEvent(input$update, {
      apexchartProxy("my_chart") %>%
        ax_proxy_options(list(
          title = list(
            text = "New title"
          ),
          xaxis = list(
            max = NEW_VALUE
          )
        ))
    })

## Interactions

### Click

Click on a chart to select a data point and retrieve value server side with `set_input_click()` :

    data.frame(
      month = month.abb,
      value = sample(1:100, 12)
    ) %>%
      apex(aes(month, value), height = "250px") %>%
      ax_title("Click a bar:") %>%
      set_input_click("click")

Value server-side will be available through `input$click`.

Depending on the type of graphic, you can retrieve :

- bar and column: category (x-axis).
- pie and donut: label.
- time-series: retrieve x-axis value, you have to display markers with size > 0 and set tooltip’s options `intersect = TRUE` and `shared = FALSE`.
- scatter: retrieve XY coordinates.

Multiple selection is possible and you can change the darken effect of selected bars :

    data.frame(
      month = month.abb,
      value = sample(1:100, 12)
    ) %>%
      apex(aes(month, value), height = "250px") %>%
      ax_title("Click several bars:") %>%
      set_input_click(
        inputId = "click",
        multiple = TRUE,
        effect_value = 0.1
      )

More examples are available with:

    run_input_demo("click")

### Zoom

Retrieve the coordinates of the axes when the graph is zoomed in:

    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 :

    #> $x
    #> $x$min
    #> [1] "1981-10-24 15:41:16 UTC"
    #>
    #> $x$max
    #> [1] "1992-01-24 06:40:22 UTC"
    #>
    #>
    #> $y
    #> $y$min
    #> NULL
    #>
    #> $y$max
    #> NULL

Here values for `y` are `NULL` because zoom is only possible on x-axis, but for a scatter chart for example you can zoom on both axis.

More examples are available with:

    run_input_demo("zoom")

### Selection

Retrieve the coordinates of the axes when user select an area on a chart (without zooming):

    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 :

    #> $x
    #> $x$min
    #> [1] "1981-10-24 15:41:16 UTC"
    #>
    #> $x$max
    #> [1] "1992-01-24 06:40:22 UTC"

You can define a selected area at start:

    apex(economics, aes(date, psavert), type = "line", height = "250px") %>%
      set_input_selection(
        inputId = "selection",
        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):

    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:

    #> $x
    #> $x$min
    #> [1] 5.130187
    #>
    #> $x$max
    #> [1] 5.541228
    #>
    #>
    #> $y
    #> $y$min
    #> [1] 2.959623
    #>
    #> $y$max
    #> [1] 3.860357

More examples are available with:

    run_input_demo("selection")