Comments (6)
Quick example of how it's possible with htmltools :
library(apexcharter)
library(htmltools)
# This function returns HTML as strings
make_tooltip <- function(Sepal.Length, Sepal.Width, Petal.Length, Petal.Width, Species) {
tag <- tags$div(
tags$div("This is a title", class = "apexcharts-tooltip-title"),
tags$div(
style = "padding: 10px;",
"Some informations about this point:",
tags$ul(
tags$li("Sepal.Length:", tags$b(Sepal.Length)),
tags$li("Sepal.Width:", tags$b(Sepal.Width)),
tags$li("Petal.Length:", tags$b(Petal.Length)),
tags$li("Petal.Width:", tags$b(Petal.Width)),
tags$li("Species:", tags$b(Species))
)
)
)
doRenderTags(tag)
}
# Apply function over all columns and create a new variable
iris$tooltip <- mapply(
FUN = make_tooltip,
Sepal.Length = iris$Sepal.Length,
Sepal.Width = iris$Sepal.Width,
Petal.Length = iris$Petal.Length,
Petal.Width = iris$Petal.Width,
Species = iris$Species
)
# use "tooltip" variable in a custom aesthetic
apex(iris, aes(Sepal.Length, Sepal.Width, group = Species, tooltip = tooltip), type = "scatter") %>%
ax_tooltip(custom = JS(
# return the value of variable "tooltip" when point is hovered
"function({ series, seriesIndex, dataPointIndex, w }) {return w.config.series[seriesIndex].data[dataPointIndex].tooltip}"
))
from apexcharter.
Hello,
Yes there's still some work to do on tooltips, the complicated things is that's it's different according to type of charts.
Quick answer: in your first example try to replace .tooltip
by [2]
, e.g. :
"function({ series, seriesIndex, dataPointIndex, w }) {return w.config.series[seriesIndex].data[dataPointIndex][2]}"
Is this better?
from apexcharter.
Hi,
Yes there's currently no easy way to do it, only example of custom tootilp I have is this one : https://dreamrs.github.io/apexcharter/articles/advanced-configuration.html#scatter-plot
But it might be something easier to do by using htmltools.
What type of chart are you using ?
from apexcharter.
Thank you very mich for the provided example, it helped me create my own tooltip. Unfortunately it is also missing information which was present in the default tooltip: The color of the group to which the observation in question belongs. Is there a way to re-implement this in the custom tooltip? Because it really is an essential piece of information.
I am using a scatterplot if that helps. I originally tried mapping the shape of the markers to a variable (so I could have either squares or circles depending on that variable) but that does not seem to be possible with Apexcharter, hence the need for a custom tooltip to include that piece of information.
from apexcharter.
Hi Victor,
I am having a similar problem and I cannot seem to get the code above working. I also tried to apply the code from your "advanced configuration" with no success.
Would you mind advising what I am doing incorrectly?
Using an example above:
library(tidyverse)
library(lubridate)
library(apexcharter)
library(htmltools)
dat <- tribble(
~Time, ~value, ~Erosion, ~Indications,
"01/01/2019", 4571.00, "0%", "a",
"01/09/2021", 4571.00, "0%", "a",
"01/10/2021", 3794.00, "-17%", "b",
"01/11/2021", 3794.00, "0%", "b",
"01/12/2021", 3604.00, "-5%", "c",
"01/08/2023", 3604.00, "0%", "c",
"01/09/2023", 3082.00, "-14%", "d",
"01/10/2023", 3082.00, "0%", "d",
"01/12/2029", 3082.00, "0%", "d",
) %>%
mutate(Time = dmy(Time),
Feature = "treatment")
floor <- dat %>%
mutate(value = 1000,
Indications = "None",
Erosion = "0%",
Feature = "floor")
dat <- bind_rows(dat, floor)
make_tooltip <- function(value, Indications, Erosion, Feature) {
tag <- tags$div(
tags$div("Date:", class = "apexcharts-tooltip-title"),
tags$div(
style = "padding: 10px;",
"Some informations about this point:",
tags$ul(
tags$li("value", tags$b(value)),
tags$li("Indications:", tags$b(Indications)),
tags$li("Erosion:", tags$b(Erosion)),
tags$li("Feature:", tags$b(Feature))
)
)
)
doRenderTags(tag)
}
dat$tooltip <- mapply(
FUN = make_tooltip,
value = dat$value,
Indications = dat$Indications,
Erosion = dat$Erosion,
Feature = dat$Feature
)
apex(data = dat, type = "line",
mapping = aes(x = Time, y = value, group = Feature, tooltip = tooltip)
) %>%
ax_stroke(dashArray = c(0, 6)) %>%
ax_colors(colors = c("#ffa500", "#000000")) %>%
ax_tooltip(
custom = JS(
"function({ series, seriesIndex, dataPointIndex, w }) {return w.config.series[seriesIndex].data[dataPointIndex].tooltip}"
)
)
Using example from your advanced config page:
library(tidyverse)
library(lubridate)
library(apexcharter)
library(htmltools)
dat <- tribble(
~Time, ~value, ~Erosion, ~Indications,
"01/01/2019", 4571.00, "0%", "a",
"01/09/2021", 4571.00, "0%", "a",
"01/10/2021", 3794.00, "-17%", "b",
"01/11/2021", 3794.00, "0%", "b",
"01/12/2021", 3604.00, "-5%", "c",
"01/08/2023", 3604.00, "0%", "c",
"01/09/2023", 3082.00, "-14%", "d",
"01/10/2023", 3082.00, "0%", "d",
"01/12/2029", 3082.00, "0%", "d",
) %>%
mutate(Time = dmy(Time),
Feature = "treatment")
floor <- dat %>%
mutate(value = 1000,
Indications = "None",
Erosion = "0%",
Feature = "floor")
dat <- bind_rows(dat, floor)
apex(data = dat, type = "line",
mapping = aes(x = Time, y = value, group = Feature)
) %>%
ax_stroke(dashArray = c(0, 6)) %>%
ax_colors(colors = c("#ffa500", "#000000")) %>%
ax_tooltip(
custom = 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-y-group\">' +",
"'<span class = \"apexcharts-tooltip-text-label\">' +",
"'Value: ' +",
"'</span>' +",
"'<span class = \"apexcharts-tooltip-text-value\">' +",
"w.config.series[seriesIndex].data[dataPointIndex].x +",
"'</span>' +",
"'</br>' +",
"'<span class = \"apexcharts-tooltip-text-label\">' +",
"'Indications: ' +",
"'</span>' +",
"'<span class = \"apexcharts-tooltip-text-value\">' +",
"w.config.series[seriesIndex].data[dataPointIndex].Indications +",
"'</span>' +",
"'</br>' +",
"'<span class = \"apexcharts-tooltip-text-label\">' +",
"'Erosion: ' +",
"'</span>' +",
"'<span class = \"apexcharts-tooltip-text-value\">' +",
"w.config.series[seriesIndex].data[dataPointIndex].y +",
"'</span>' +",
"'</div>' +",
"'</div>' +",
"'</div>'",
");",
"}", sep = "\n"
)
)
)
I would appreciate any help on this!
from apexcharter.
Worked like a charm! Thank you for super quick reply, Victor :)
from apexcharter.
Related Issues (20)
- Adding Icons or Color to the Tooltip HOT 2
- Adding Confidence Intervals HOT 4
- Creating box plot with apexcharter HOT 2
- facet not working on shinyapps HOT 3
- Brush does not work HOT 3
- Combining facets with annotations HOT 1
- Mixed/Combo charts when using apex() function to create series
- Stacked Bar Chart by Week Ending Date - x-axis labels HOT 3
- Colour mis-match on line markers for more than 10 series HOT 1
- No shared tooltip HOT 4
- Thrid y axis HOT 2
- Change to new cran checks badge URL HOT 1
- Feature request: New chart type - box plots HOT 5
- Adding Icons to the Labels in a Legend HOT 4
- Format numbers in spark_box's tooltip HOT 2
- ax_forecast_data_points() seems to be missing HOT 2
- Remove Time Gaps from Candlestick Chart HOT 2
- [Feature request] - adding outliers and custom data points to a boxplot
- Synchronize Charts Example doesn't display both plots at the same time in Rstudio's plot panel. HOT 2
- Feature request: bring crosstalk functionality to connect apexchart with tables
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from apexcharter.