Here some advanced configuration examples to use the full potential of [ApexCharts](https://apexcharts.com/).
# Bar chart
This example is taken from [{hrbrthemes}](https://github.com/hrbrmstr/hrbrthemes) readme, it use `mpg` dataset from [{ggplot2}](https://github.com/tidyverse/ggplot2).
Tranform data and initialize the chart :
```{r}
data("mpg", package = "ggplot2")
bars <- count(mpg, class) %>%
mutate(pct = n/sum(n)) %>%
apex(mapping = aes(class, pct), type = "column")
```
Change color used :
```{r}
bars <- bars %>%
ax_colors("#617a89")
```
Modify the y-axis and add a percent symbol after the labels :
title = "Continent of origin for refugees population",
subtitle = "Data from the UN Refugee Agency"
) %>%
ax_title(
style = list(fontSize = "22px")
) %>%
ax_subtitle(
style = list(fontSize = "16px", color = "#BDBDBD")
)
```
</details>
<br>
<br>
# Scatter plot
Dataset used is from [{gapminder}](https://github.com/jennybc/gapminder).
Tranform data and initialize the chart :
```{r}
data("gapminder", package = "gapminder")
scatter <- gapminder %>%
filter(year == 2007) %>%
mutate(
gdpPercap = log(gdpPercap),
pop = sqrt(pop / pi) / 1500
) %>%
apex(
mapping = aes(gdpPercap,
lifeExp,
z = pop,
group = continent,
label = country),
type = "scatter",
height = "500px"
)
```
Enable zoom on both axis :
```{r}
scatter <- scatter %>%
ax_chart(zoom = list(
enabled = TRUE, type = "xy"
))
```
Show y-axis border and ticks, no decimals in labels :
```{r}
scatter <- scatter %>%
ax_yaxis(
decimalsInFloat = 0,
axisBorder = list(show = TRUE),
axisTicks = list(show = TRUE),
title = list(text = "life expectancy at birth (in years)")
)
```
Configuration for x-axis, hide the tooltip displayed on the axis itself (not the main tooltip), dispaly two decimals in the labels (useful when zooming, since values are logarithm there's a lot of decimals) :
Add a custom tooltip with an HTML string, data used in aesthetic can be accessed in JavaScrip with `w.config.series[seriesIndex].data[dataPointIndex].x` (x is the variable `gdpPercap`), or `w.config.series[seriesIndex].data[dataPointIndex].label` (the country), it's possible to use custom aesthetics to include more data in the chart configuration script.
```{r}
scatter <- scatter %>%
ax_tooltip(custom = JS(paste(
"function({ series, seriesIndex, dataPointIndex, w }) {",
style = list(fontSize = "16px", color = "#BDBDBD")
)
```
</details>
<br>
<br>
# Heatmap
This is an adaption of this fancy [{highcharter} example](http://jkunst.com/highcharter/showcase.html), based from this [WSJ visualisation](http://graphics.wsj.com/infectious-diseases-and-vaccines/).
```{r}
data("vaccines", package = "highcharter")
heatmap <- apex(
vaccines,
aes(year, state, fill = count),
type = "heatmap",
height = "800px"
)
```
Remove the animations (little slow otherwise) :
```{r}
heatmap <- heatmap %>%
ax_chart(animations = list(enabled = FALSE))
```
Remove values displayed in the heatmap :
```{r}
heatmap <- heatmap %>%
ax_dataLabels(enabled = FALSE)
```
Remove space between squared of the heatmap :
```{r}
heatmap <- heatmap %>%
ax_stroke(width = 0)
```
That's not possible to make a continuous scale in the legend (like with highcharter), so we use breakpoints :
```{r}
heatmap <- heatmap %>%
ax_plotOptions(
heatmap = heatmap_opts(
radius = 0,
enableShades = FALSE,
colorScale = list(
ranges = list(
list(
from = 0,
to = 0.001,
name = "Missing",
color = "#FFF"
),
list(
from = 0.001,
to = 4,
name = "low",
# color = "#000004"
color = "#FDE725"
),
list(
from = 4,
to = 70,
name = "mid-low",
# color = "#781C6D",
color = "#35B779"
),
list(
from = 70,
to = 290,
name = "mid-high",
# color = "#ED6925",
color = "#31688E"
),
list(
from = 290,
to = 3000,
name = "high",
# color = "#FCFFA4",
color = "#440154"
)
)
)
)
)
```
Missing values are colored by default, above we set them to be displayed in white, and now we hide the corresponding legend :
```{r}
heatmap <- heatmap %>%
ax_legend(
formatter = JS(
"function(seriesName, opts) {
if (seriesName == 'Missing') return null; else return seriesName;
}"
)
)
```
Set size of the y-axis labels :
```{r}
heatmap <- heatmap %>%
ax_yaxis(
labels = list(
style = list(fontSize = "8px")
)
)
```
Add a vertical line to identify the year when the vaccine was intrtoduced :