# Plot: Mouse over

**URL:** <https://talk.observablehq.com/t/plot-mouse-over/6394>\
**Category:** Help\
**Created:** [March 24, 2022, 10:15pm UTC](https://talk.observablehq.com/t/plot-mouse-over/6394 "2022-03-24T22:15:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kadale](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@kadale](https://talk.observablehq.com/u/kadale)\
**Post date:** [March 24, 2022, 10:15pm UTC](https://talk.observablehq.com/t/plot-mouse-over/6394/1 "2022-03-24T22:15:03Z")

</div>

I’m trying to draw border around bars on mouse over in this Plot - [Vacation Gantt / hashg / Observable](https://observablehq.com/d/9228c1470aabf3a1)

Something similar to this

[https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/5/59b6fc79d0619ba39040895a89d0a6f17064e570.mp4](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/5/59b6fc79d0619ba39040895a89d0a6f17064e570.mp4)

I could not find any API to attain this here - [Observable Plot / Observable / Observable](https://observablehq.com/@observablehq/plot?collection=@observablehq/plot)

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [March 25, 2022, 8:43am UTC](https://talk.observablehq.com/t/plot-mouse-over/6394/2 "2022-03-25T08:43:10Z")

</div>

Plot doesn’t have interactions (yet). For now, you can use the svg it returns and animate it with css or javascript.

For example:

```nohighlight
html`<style>svg g:nth-of-type(5) rect:hover { stroke: black; stroke-width: 3 }`

```

or

```nohighlight
{
  const container = d3.select(chart).select("g[aria-label]:nth-of-type(5)");
  const rects = container.selectAll("rect");
  rects.on("mouseenter", function () {
    rects.attr("rx", null).classed("highlight", false);
    d3.select(this).raise().attr("rx", 4).classed("highlight", true);
  });
  return html`<style>rect.highlight {stroke: black; stroke-width: 4;}`
}

```

---

<div class="post-metadata">

**Author:** ![kadale](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@kadale](https://talk.observablehq.com/u/kadale)\
**Post date:** [March 26, 2022, 2:21am UTC](https://talk.observablehq.com/t/plot-mouse-over/6394/3 "2022-03-26T02:21:48Z")

</div>

Thank you for quick solution. 👍