quarto-dev / quarto-dev/quarto-cli

Mouse hover on interactive graph works on wrong positions on `revealjs` presentation

Open
#1,004 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug revealjs windows
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

The mouse selects wrong items on interactive charts for revealjs presentations - sometimes interactivity stops working altogether.

The same issue happens on the Presentation window of RStudio, Edge Browser and Chrome - inside Quarto .md file (notebook) interactivity works without issue.

The screenshot shows when clicking the red legend, the blue legend gets selected. When clicking blue legend nothing happens.
inconsistent_placement

Code to repliate

---
format:
  revealjs:
    self-contained: true
    incremental: true
    transition: convex
    slide-number: true
    controls: true
    controls-layout: edges
---


## Plot and Data {.smaller .scrollable }

::: panel-tabset
### Plot

```{r}
library(echarts4r)
library(htmlwidgets)
library(webshot2)
df <- data.frame(
  #x = LETTERS[1:5],
  x = c("Sales", "Marketing", "C", "D","E" ),
  y = c(0,2,3,4,7),#runif(5, 1, 5),
  z = runif(5, 3, 7)
)

radar_chart = df |>
  e_charts(x) |>
  e_radar(y, max = 7, name = "Quarter 1", color=c("red","blue") )|>
  e_radar(z, name = "Quarter 2") #|>
  #e_legend(show = FALSE)
radar_chart
```

---

### Data

```{r}
df
```


### tree graph

```{r}
library(tibble)

tree <- tibble(
  tibble(name = "earth","fire"),       # 1st level
  children = list(
    tibble(name = c("land", "ocean"),             # 2nd level
       children = list(
         tibble(name = c("forest", "river")),   # 3rd level 
         tibble(name = c("fish", "kelp"),
            children = list(
               tibble(name = c("shark", "tuna"),  # 4th level 
               NULL  # kelp
            ))
         )
       ))
  )
)

tree |> 
  e_charts() |> 
  e_tree() |> 
  e_title("Tree graph")
```

### data
```{r}
tree
```
:::

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the supplied Quarto .md example with the revealjs format, then compare interaction in the Presentation window, Edge, and Chrome against the working notebook case. Done means clicking each chart legend selects the correct item and interactivity remains available.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, r
Domain
data-visualization, frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.