click category

NAMESPACE

@@ -42,6 +42,7 @@ export(parse_df)
 export(pie_opts)
 export(radialBar_opts)
 export(renderApexchart)
+export(set_input_category)
 importFrom(ggplot2,aes)
 importFrom(htmlwidgets,JS)
 importFrom(htmlwidgets,createWidget)

R/shiny-input.R

@@ -0,0 +1,18 @@
+
+#' Retrieve category (x-axis) in Shiny
+#'
+#' @param ax An \code{apexcharts} \code{htmlwidget} object. 
+#' @param inputId The id that will be used server-side for retrieveng category.
+#'
+#' @return An \code{apexcharts} \code{htmlwidget} object.
+#' @export
+#'
+#' @examples
+set_input_category <- function(ax, inputId) {
+  ax$x$input$category <- list(
+    inputId = inputId
+  )
+  ax
+}
+
+

inst/examples-input/category.R

@@ -0,0 +1,32 @@
+
+library(shiny)
+library(apexcharter)
+
+ui <- fluidPage(
+  tags$h2("Retrieve category clicked"),
+  fluidRow(
+    column(
+      width = 6,
+      apexchartOutput("chart1"),
+      verbatimTextOutput("result1")
+    )
+  )
+)
+
+server <- function(input, output, session) {
+  
+  output$chart1 <- renderApexchart({
+    data.frame(
+      month = month.abb,
+      value = sample(1:100, 12)
+    ) %>% 
+      apex(aes(month, value)) %>% 
+      set_input_category("month_click")
+  })
+  output$result1 <- renderPrint({
+    input$month_click
+  })
+  
+}
+
+shinyApp(ui, server)

inst/htmlwidgets/apexcharter.js

@@ -18,14 +18,32 @@ HTMLWidgets.widget({
         ax_opts = x.ax_opts;
 
         // Sizing
-        if (typeof ax_opts.chart === 'undefined') {
+        if (typeof ax_opts.chart === "undefined") {
           ax_opts.chart = {};
         }
         ax_opts.chart.width = width;
         ax_opts.chart.height = height;
-        if (!ax_opts.chart.hasOwnProperty('parentHeightOffset')) {
+        if (!ax_opts.chart.hasOwnProperty("parentHeightOffset")) {
           ax_opts.chart.parentHeightOffset = 0;
         }
+        
+        if (x.hasOwnProperty("input") & HTMLWidgets.shinyMode) {
+          if (!ax_opts.hasOwnProperty("chart")) {
+            ax_opts.chart = {};
+          }
+          if (!ax_opts.chart.hasOwnProperty("events")) {
+            ax_opts.chart.events = {};
+          }
+          if (x.input.hasOwnProperty("category")) {
+            ax_opts.chart.events.dataPointSelection = function(event, chartContext, opts) {
+              console.log(opts);
+              Shiny.setInputValue(
+                x.input.category.inputId, 
+                opts.w.config.series[opts.seriesIndex].data[opts.selectedDataPoints[0]].x
+              );
+            };
+          }
+        }
 
         // Generate or update chart
         if (apexchart === null) {

man/set_input_category.Rd

@@ -0,0 +1,19 @@
+% Generated by roxygen2: do not edit by hand
+% Please edit documentation in R/shiny-input.R
+\name{set_input_category}
+\alias{set_input_category}
+\title{Retrieve category (x-axis) in Shiny}
+\usage{
+set_input_category(ax, inputId)
+}
+\arguments{
+\item{ax}{An \code{apexcharts} \code{htmlwidget} object.}
+
+\item{inputId}{The id that will be used server-side for retrieveng category.}
+}
+\value{
+An \code{apexcharts} \code{htmlwidget} object.
+}
+\description{
+Retrieve category (x-axis) in Shiny
+}