Closed tobiasblasberg closed 3 years ago
Hi,
Can you provide a complete example please ? I'll look into it.
Victor
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
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
Hi Victor,
thanks a lot! This example with function(value, {series, seriesIndex, dataPointIndex, w}
helps a lot!
Best, Tobias
Hi,
based on your example gapminder scatter plot example: https://dreamrs.github.io/apexcharter/articles/articles/advanced-configuration.html
I want to create a simple "one-line"- bubble chart inside a table where I would like to add a tooltip containing just the color indicator of the series and the x value.
Objective: Is there a way to replace "a:" with the series indicator like in the regular Apexchart tooltips?
current custom tooltip: