Plot: Mouse over

Community Help
1

I’m trying to draw border around bars on mouse over in this Plot - Vacation Gantt / hashg / Observable

Something similar to this

I could not find any API to attain this here - Observable Plot / Observable / Observable

2

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

For example:

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

or

{
  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;}`
}
1 Like
3

Thank you for quick solution. :+1: