I've built an R flexdashboard and am using an htmlwidget, crosstalk, to filter my dashboard's plotly charts.
My current issue is that data labels for a horizontal bar chart are being cut off. I'm trying to remedy this by adjusting the x-axis max. More specifically, I'm trying to tailor the x-axis max to the values of each filtered group, so that the chart produces an appropriate axis range for all groups.
I'm currently trying to do this in plotly with layout(xaxis = list(range = c(~xaxis_max[1])). However, this indexes the first value in the entire shared data set, rather than the first value in the filtered shared data set. So this doesn't work for groups with smaller values.
Any thoughts on how to adjust so that each group's chart has a group-specific axis maximum? It doesn't appear that autorange for x-axis considers data labels, so that's a shame.
Full reprex below (chart displays as intended for team 1, axis not adjusting not team 2):
---
title: "Donut Dashboard"
output:
flexdashboard::flex_dashboard
---
```{r setsup, echo=FALSE}
library(flexdashboard)
library(plotly)
library(tidyverse)
library(crosstalk)
my_tibble <- tibble(donuts_eaten = c(7436, 12761, 13153, 12707, 183, 377, 368, 381),
week = c(1,2,3,4,1,2,3,4),
donut_type = c("glazed", "chocolate", "cake", "sprinkle",
"glazed", "chocolate", "cake", "sprinkle"),
group = c("team 1", "team 1", "team 1", "team 1",
"team 2", "team 2", "team 2", "team 2"))
#Create group-specific variable for x-axis max
my_tibble <- my_tibble %>%
group_by(group) %>%
mutate(xaxis_max = 1.5*max(donuts_eaten)) %>%
ungroup()
my_tibble_shared <- SharedData$new(my_tibble, ~group)
```
Column {data-width=650}
-----------------------------------------------------------------------
<!-- Create filter for plotly chart -->
### Filter
```{r}
filter_select(
id = "group",
label = "Filter group:",
sharedData = my_tibble_shared,
group = ~group,
multiple = F
)
```
```{js}
$(document).ready(function() {
document.getElementById("group").getElementsByClassName("selectized")[0].selectize.setValue("team 1", false);
});
```
Column {data-width=350}
-----------------------------------------------------------------------
### Donuts Eaten
```{r}
#Create function to make horizontal bar chart for donuts eaten
plot_ly(data = my_tibble_shared, hoverinfo = "none") %>%
#adjust x-axis max to show data labels
layout(
xaxis = list(range = c(0, ~xaxis_max[1])),
showlegend = F) %>%
#plot donuts eaten by donut type
add_trace(
x = ~donuts_eaten,
y = ~donut_type,
type = "bar") %>%
#place text labels on chart
add_text(
x = ~donuts_eaten,
y = ~donut_type,
text = ~donuts_eaten,
textposition = "right",
textfont = list(color = "black"),
showlegend = F,
texttemplate = paste('<b> %{text:,.1d} </b>'))
```