Comments (5)
Hello,
Quick answer to help you (there's a point in your question that is more complicated, I'll respond later).
In your formatter
JavaScript code, a semicolon is missing, e.g. :
JS("function(value) {return value + '%';}")
You can also customize numeric format in tooltip / axes with format_num()
function, complete example:
library(ggplot2)
library(scales)
library(dplyr)
library(apexcharter)
data("mpg")
n_manufac_year <- count(mpg, manufacturer, year) %>%
group_by(manufacturer) %>%
mutate(pct = n / sum(n)) # dont divide by 100
apex(data = n_manufac_year, type = "column", mapping = aes(x = manufacturer, y = pct, fill = year)) %>%
ax_chart(stacked = TRUE) %>%
ax_yaxis(
max = 1,
labels = list(
formatter = format_num(".0%") # no decimal
)
) %>%
ax_tooltip(
y = list(
formatter = format_num(".2%") # 2 decimals
)
)
The more complex things to do in tooltip is to add another value not used in chart, in your case the absolute value after the percentage. It would be a neat functionnality, I have to think how to implement this in a smart way.
Victor
from apexcharter.
Thanks for your help Victor !
I see the trick.
It seems to be possible in echarts4r, I was simply wondering if it followed the same logic here.
from apexcharter.
You're welcome! No that's a little different in Apexcharts.
A solution in your case is to do:
apex(
data = n_manufac_year,
type = "column",
mapping = aes(
x = manufacturer,
y = pct, fill = year,
# Custom text to be displayed in tooltip
custom_tooltip = paste0("Percentage: ", round(pct * 100), "% (total: ", n, ")")
)
) %>%
ax_chart(stacked = TRUE) %>%
ax_tooltip(
y = list(
# use custom text
formatter = JS(
"function(value, series) {return series.w.config.series[series.seriesIndex].data[series.dataPointIndex].custom_tooltip;}"
)
)
)
But I'll love to implement something more user-friendly and robust across type of charts...
Victor
from apexcharter.
Thanks Victor, it works great !
Implementing an easier formatter
syntax for people who don't know JS would be useful for sure.
But also simply providing a link in the vignette to try to understand the JS syntax would already be very useful as well.
When you go on this page, and click on the JS function under the 'Bar chart' section it redirects here. But to be honest I don't really understand the message.
from apexcharter.
Hi Victor,
Related to this issue: is there a way to vertical-align up the series name in a tooltip generated from multiple custom tooltips?
Example:
apex(
data = n_manufac_year,
type = "column",
mapping = aes(
x = manufacturer,
y = pct, fill = year,
# Custom text to be displayed in tooltip
custom_tooltip = paste0("Percentage= ", round(pct * 100), "%"),
custom_tooltip_N = paste0("total=", n)
)
) %>%
ax_chart(stacked = TRUE) %>%
ax_tooltip(
y = list(
# use custom text
formatter = JS(
"function(value, series) {return(
series.w.config.series[series.seriesIndex].data[series.dataPointIndex].custom_tooltip + '<br/>' +
series.w.config.series[series.seriesIndex].data[series.dataPointIndex].custom_tooltip_N)}"
)
)
)
If not possible, could we remove the series name completely?
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.