Quarto figure labels break tooltip formatting for echarts plots

Question

After adding a figure label to a quarto chunk that creates an echarts plot, the text in the tooltip becomes misaligned. This seems to be an issue only recently introduced.

Here is an example without a figure label and the tooltip renders properly:

---
title: "test"
date: "`r Sys.Date()`"
---

```{r}

df <- data.frame(
  group = c("Group A", "Group A", "Group B", "Group B", "Group C", "Group C"),
  category = c("really really long catgegory", "medium category", "short", "really really long catgegory", "medium category", "short"),
  value = c(3, 20, 43, 5, 82, 32)
)

# Create an echarts plot
df |> 
  dplyr::group_by(category) |> 
  echarts4r::e_chart(group) |> 
  echarts4r::e_bar(value, stack = "stacked") |> 
  echarts4r::e_tooltip(trigger = "axis") 


```

Here is an example with a figure label that causes the tooltip formatting to change:

---
title: "test"
date: "`r Sys.Date()`"
---

```{r}
#| label: fig-1

df <- data.frame(
  group = c("Group A", "Group A", "Group B", "Group B", "Group C", "Group C"),
  category = c("really really long catgegory", "medium category", "short", "really really long catgegory", "medium category", "short"),
  value = c(3, 20, 43, 5, 82, 32)
)

# Create an echarts plot
df |> 
  dplyr::group_by(category) |> 
  echarts4r::e_chart(group) |> 
  echarts4r::e_bar(value, stack = "stacked") |> 
  echarts4r::e_tooltip(trigger = "axis") 


```

Is this a bug in quarto? Is there a way to ensure the tooltip text is left justified even when adding a figure label?

Answer 1

The issue is some clash with the CSS applied by quarto. When adding the figure label the chart gets wrapped in a div with class .quarto-figure-center which has the property text-align: center. This property is inherited by the tooltip and hence you get a centered tooltip text.

Not sure what's the best way to deal with that. But one option which works for me is to set the text alignment for the tooltip explicitly which could be achieved via the extraCssText option in e_tooltip.

---
title: "test"
date: "`r Sys.Date()`"
---

```{r}
#| label: fig-1

df <- data.frame(
  group = c("Group A", "Group A", "Group B", "Group B", "Group C", "Group C"),
  category = c(
    "really really long catgegory", "medium category",
    "short", "really really long catgegory", "medium category", "short"
  ),
  value = c(3, 20, 43, 5, 82, 32)
)

df |>
  dplyr::group_by(category) |>
  echarts4r::e_chart(group) |>
  echarts4r::e_bar(value, stack = "stacked") |>
  echarts4r::e_tooltip(
    trigger = "axis",
    extraCssText = list("text-align: left;")
  )
```