# Observable Plot click events

**URL:** <https://talk.observablehq.com/t/observable-plot-click-events/8633>\
**Category:** Help\
**Created:** [December 20, 2023, 12:03pm UTC](https://talk.observablehq.com/t/observable-plot-click-events/8633 "2023-12-20T12:03:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sym0](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/sym0/32/8392_2.png) [@sym0](https://talk.observablehq.com/u/sym0)\
**Post date:** [December 20, 2023, 12:03pm UTC](https://talk.observablehq.com/t/observable-plot-click-events/8633/1 "2023-12-20T12:03:04Z")

</div>

Does Observable Plot support click events, and how can I add a click event to each dot on the plot?

> **[Plot: Scatterplot with color](https://observablehq.com/@observablehq/color-scatterplot?intent=fork)**
>
> Two quantitative dimensions encoded to the x and y dimensions (see scales), and a categorical dimension encoded to stroke (color), drawn with the dot mark.

---

<div class="post-metadata">

**Author:** ![tophtucker](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tophtucker/32/4781_2.png) [@tophtucker](https://talk.observablehq.com/u/tophtucker)\
**Post date:** [December 23, 2023, 4:49pm UTC](https://talk.observablehq.com/t/observable-plot-click-events/8633/2 "2023-12-23T16:49:49Z")

</div>

It’s not very easy today, but you can do it with a render transform:

> **[Plot: Click handler render transform](https://observablehq.com/@tophtucker/plot-click-handler-render-transform)**
>
> sym0 asks, “Does Observable Plot support click events, and how can I add a click event to each dot on the plot?” Plot doesn’t have a simple click handler, but you can get there with a “render transform”, which hasn’t been documented that much yet.

---

<div class="post-metadata">

**Author:** ![sym0](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/sym0/32/8392_2.png) [@sym0](https://talk.observablehq.com/u/sym0)\
**Post date:** [December 25, 2023, 9:41am UTC](https://talk.observablehq.com/t/observable-plot-click-events/8633/3 "2023-12-25T09:41:10Z")

</div>

Thank you very much for your patient answer. This method has solved my problem.

---

<div class="post-metadata">

**Author:** ![kickout](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/kickout/32/2541_2.png) [@kickout](https://talk.observablehq.com/u/kickout)\
**Post date:** [March 30, 2024, 6:44pm UTC](https://talk.observablehq.com/t/observable-plot-click-events/8633/4 "2024-03-30T18:44:29Z")

</div>

Is there work being done to advance this? Very interested, but current solution are clunky.

Remaking an old chart [here](https://observablehq.com/d/e1cd528b147b0a77) but I want to print the slopes when a user clicks.

My old solution pre-Plot() is [here](https://observablehq.com/@kickout/linear-regression)

---

<div class="post-metadata">

**Author:** ![tophtucker](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tophtucker/32/4781_2.png) [@tophtucker](https://talk.observablehq.com/u/tophtucker)\
**Post date:** [April 2, 2024, 3:46pm UTC](https://talk.observablehq.com/t/observable-plot-click-events/8633/5 "2024-04-02T15:46:06Z")

</div>

No progress since last time, I’m afraid!

I don’t think this solves your problem (or sym0’s), but, if others come across this, I should note that all marks do support an **href** channel (see [Mark options](https://observablehq.com/plot/features/marks#mark-options)) that makes marks into links. E.g., in this example, you can click an earthquake to see details on the USGS website:

> **[Plot: Live earthquake map](https://observablehq.com/@observablehq/plot-live-earthquake-map?intent=fork)**
>
> The geo mark renders GeoJSON data, such as the land geometry in gray, and the earthquake features returned by USGS’s live API.

```js
Plot.plot({
  projection: "equirectangular",
  style: "overflow: visible;",
  marks: [
    Plot.geo(land, {fill: "currentColor", fillOpacity: 0.2}),
    Plot.sphere(),
    Plot.geo(earthquakes, {
      r: (d) => Math.pow(10, d.properties.mag),
      fill: "red",
      fillOpacity: 0.2,
      stroke: "red",
      title: (d) => d.properties.title,
      href: (d) => d.properties.url,
      target: "_blank"
    })
  ]
})

```

---

<div class="post-metadata">

**Author:** ![mkfreeman](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mkfreeman/32/2988_2.png) [@mkfreeman](https://talk.observablehq.com/u/mkfreeman)\
**Post date:** [October 15, 2024, 12:35am UTC](https://talk.observablehq.com/t/observable-plot-click-events/8633/6 "2024-10-15T00:35:53Z")

</div>

Hey @tophtucker 👋 ! Looks like the rendering order of elements in Plot (or the order of the elements in the `.value` array) has perhaps changed since you created this example. When I click one of the circles, the value doesn’t correspond to the circle I’ve clicked.

For anyone else who finds themselves at the bottom of this thread, I’ve used an `aria-label` as a workaround. In my case, I wanted to highlight all elements of the same fill on mouseenter:

```js
for (let i = 0; i < elements.length; i++) {
    elements[i].addEventListener("mouseenter", (ele) => {                    
    const focusCategory = elements[i].getAttribute("aria-label");          
    Array.from(elements).map((element, idx) => {            
      const category = element.getAttribute("aria-label");
      if (category === focusCategory) {
        element.style[`${colorType}Opacity`] = "1";
      } else {
        element.style[`${colorType}Opacity`] = "0.5";
      }
    });
  });

Happy to put together a quick notebook if it's helpful. 

```