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?

I would suggest figuring out the css that controls the alignment in the tooltips outside of quarto. Then you can simply set that for the quarto docs. That might help. — boshek, Jul 20 '23 at 22:43

score 1 · Accepted Answer · answered Jul 21 '23 at 06:36

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;")
  )
```

I think this behavior is new, so it must have been introduced in a recent version of quarto. But I'm having trouble locating where in the quarto codebase this CSS lives and is applied. Can you point me in the right direction so I can find out which version of quarto introduced this change? — Giovanni Colitti, Jul 21 '23 at 16:37

Quarto figure labels break tooltip formatting for echarts plots

1 Answers1