Option to create a custom Tooltip with series marker

[dreamrs]

Option to create a custom Tooltip with series marker

[pvictor]

Hi,

Can you provide a complete example please ? I'll look into it.

Victor

[tobiasblasberg]

Thank you for your help. Here is the complete code:
I used parts of your apex function to create the series before the API with the apexchart function. At least for me, this would be a great function worth integrating into the package.

create_apex_series_original <- function(data, mapping, type = "column", ...,
                                        auto_update = TRUE,
                                        synchronize = NULL,
                                        serie_name = NULL,
                                        width = NULL,
                                        height = NULL,
                                        elementId = NULL) {
  rename_aes_heatmap <- utils::getFromNamespace("rename_aes_heatmap", "apexcharter")
  is_sized <- utils::getFromNamespace("is_sized", "apexcharter")
  correct_type <- utils::getFromNamespace("correct_type", "apexcharter")
  make_series <- utils::getFromNamespace("make_series", "apexcharter")
  choose_config <- utils::getFromNamespace("choose_config", "apexcharter")
  rename_aes_heatmap <- utils::getFromNamespace("rename_aes_heatmap", "apexcharter")
  rename_aes <- utils::getFromNamespace("rename_aes", "apexcharter")
  
  type <- match.arg(
    arg = type,
    choices = c(
      "column", "bar",
      "line", "spline", "step",
      "area", "area-spline", "area-step",
      "pie", "donut",
      "radialBar",
      "radar",
      "polarArea",
      "scatter", "bubble",
      "heatmap",
      "treemap",
      "timeline",
      "candlestick"
    )
  )
  data <- as.data.frame(data)
  if (identical(type, "heatmap")) {
    mapping <- rename_aes_heatmap(mapping)
  } else {
    mapping <- rename_aes(mapping)
  }
  if (identical(type, "scatter") & is_sized(mapping)) {
    type <- "bubble"
  }
  mapdata <- lapply(mapping, rlang::eval_tidy, data = data)
  if (is.null(mapdata$y) & !type %in% c("candlestick", "timeline", "heatmap")) {
    mapdata <- compute_count(mapdata)
  }
  if (type %in% c("pie", "donut", "radialBar", "polarArea")) {
    series <- list(mapdata$y)
  } else {
    series <- make_series(mapdata, mapping, type, serie_name)
  }
  
  return(series)
}
  
  
y <- c(0,0,0,0,0)
x <- c(-1, 0.3, 0, -0.1, 1)
z <- rep(10,5)
group <- c("a", "b", "c", "d", "e")
mapdata <- data.frame(x=x, y=y, group=group, z=z)
mapping = apexcharter::aes(x, 
              y, 
              group = group,
              size = z,
              label = group
)

series <- create_apex_series_original(mapdata, mapping= mapping, type = "scatter", force_datetime_names = FALSE)
series

fig <- apexcharter::apexchart(ax_opts = list(
  chart = list(
    type = "bubble",
    # fontFamily = 'Nunito',
    height = 35,
    width = 200,
    sparkline= list(
      enabled = TRUE
    )
  ),
  stroke=list(
    show=FALSE
  ),
  
  dataLabels = list(
    enabled = FALSE
  ),
  series = series,
  tooltip = list(
    x=list(
      show=FALSE
    ),
    shared = FALSE
  ),
  colors = c("#8089f5", "#0beaab","#fa6c89", "#ffc219",  "#4199f8"),
  xaxis = list(
    min=-1.1,
    max=1.1,
    type='numeric',
    title = list(
      style= list(fontSize=  '13px',
                  fontWeight=  'bold'
                  )
    ),
    labels = list(style= list(fontSize=  '11px'
                              )),
    tooltip= list(
      enabled = FALSE
    )
  ),
  fill=list(
    type="solid",
    opacity=1
  ),
  markers = list(
    strokeWidth = 0,
    radius=0,
    fillOpacity= 0.9
  ),
  # background
  annotations=list(
    position= "back",
    xaxis=list(
      list(
        label=list(
          text= " "
        ),
        x= -1.1,
        x2= 0,
        fillColor= "#dc3545",
        opacity=0.2
      ),
      list(
        label=list(
          text= " "
        ),
        x= 0,
        x2= 1.1,
        fillColor= "#28a745",
        opacity=0.2
      )
    )
  ),
  yaxis = list(
    min=-0.2,
    max=0.2,
    title = list(
      style= list(fontSize=  '13px',
                  fontWeight=  'bold'
                  )
      ),
    labels = list(style= list(fontSize=  '11px'
                              )
    )
    
  )
))
fig$height <- 35
fig <- fig %>% 
  apexcharter::ax_tooltip(custom = apexcharter::JS(paste(
    "function({ series, seriesIndex, dataPointIndex, w }) {",
    "console.log(w); return (",
    "'<div>' +",
    
    # "'<div class = \"apexcharts-tooltip-title\">' +",
    # "w.config.series[seriesIndex].data[dataPointIndex].label",
    # "+ '</div>' +",
    
    # "'<div style = \"padding: 5px;\">' +",
    # "'<div class = \"apexcharts-tooltip-series-group\">' +",
    # "'<span class = \"apexcharts-tooltip-marker\" style=\"background-color: rgb(57, 175, 209);\">' +",
    # "'</span>' +",
    "'<div class = \"apexcharts-tooltip-text\">' +",
    "'<div class = \"apexcharts-tooltip-y-group\">' +",
    "'<span class = \"apexcharts-tooltip-text-label\">' +",
    # "w.config.series[seriesIndex].data[dataPointIndex].label + ':' +",
    "'</span>' +",
    "'<span class = \"apexcharts-tooltip-text-value\">' +",
    "Math.round(w.config.series[seriesIndex].data[dataPointIndex].x * 100, 2) + ' %' +",
    "'</span>' +",
    # "'</div>' +",
    # "'</div>' +",
    
    "'</div>' +",
    "'</div>' +",
    
    "'</div>'",
    ");",
    "}", sep = "\n"
  )))
fig

[pvictor]

Thanks for the example. You can customize tooltip with formatters function:

ax_tooltip(
  x = list(show = FALSE),
  y = list(
    formatter = JS(
      "function(value, {series, seriesIndex, dataPointIndex, w}) {",
      "return Math.round(w.config.series[seriesIndex].data[dataPointIndex].x * 100, 2) + ' %';",
      "}"
    ),
    title = list(
      formatter = JS(
        "function(value) {return null;}"
      )
    )
  ),
  z = list(
    formatter = JS(
      "function(value) {return null;}"
    )
  )
)

Those function are intended to be used by apex(), if you want to use the list syntax, you can create series with lapply and parse_df, something like:

lapply(
  X = unique(data$group),
  FUN = function(x) {
    d <- data[data$group == x, ]
    list(name = x, data = parse_df(d, add_names = TRUE))
  }
)

With apex(), your example will look like:

y <- c(0, 0, 0, 0, 0)
x <- c(-1, 0.3, 0, -0.1, 1)
z <- rep(10,5)
group <- c("a", "b", "c", "d", "e")
data <- data.frame(x = x, y = y, group = group, z = z)

apex(data, aes(x, y, group = group, size = z), type = "bubble", height = 35) %>% 
  ax_chart(sparkline = list(enabled = TRUE)) %>% 
  ax_xaxis(min = -1.1, max = 1.1) %>% 
  ax_yaxis(min = -0.2, max = 0.2) %>% 
  ax_fill(type = "solid", opacity = 1) %>% 
  ax_annotations(
    position= "back",
    xaxis = list(
      list(
        x = -1.1,
        x2 = 0,
        fillColor = "#dc3545",
        opacity = 0.2
      ),
      list(
        x = 0,
        x2 = 1.1,
        fillColor = "#28a745",
        opacity = 0.2
      )
    )
  ) %>% 
  ax_tooltip(
    x = list(show = FALSE),
    y = list(
      formatter = JS(
        "function(value, {series, seriesIndex, dataPointIndex, w}) {",
        "return Math.round(w.config.series[seriesIndex].data[dataPointIndex].x * 100, 2) + ' %';",
        "}"
      ),
      title = list(
        formatter = JS(
          "function(value) {return null;}"
        )
      )
    ),
    z = list(
      formatter = JS(
        "function(value) {return null;}"
      )
    )
  )

Victor

[tobiasblasberg]

Hi Victor,

thanks a lot! This example with function(value, {series, seriesIndex, dataPointIndex, w} helps a lot!

Best,
Tobias