Vertical line following mouse cursor

[prog8]

Vertical line following mouse cursor

[fhurta]

Was any feature request created out of this? I would need this feature too

[etpinard]

Should be doable with plotly_hover event handler and an appropriate shape. Here's an example with a click event handler: http://chriddyp.github.io/interactive-heatmaps/ .

In the future, implementation questions should be asked on Stack Overflow (tagged plotly) or community.plot.ly (tagged plotly-js). GitHub issues are reserved for bugs reports and feature requests.

[prog8]

Thanks for your response. I'll keep in mind that I should write on Stack Overflow or community.plot.ly. From one side I wrote a question but from the other side it is feature request since Plotly doesn't support this out of the box.

[etpinard]

Correct.

#53 is a feature request, which is totally fine in this repo. 🍻

[leifdejong]

Hi! Hope you guys are well and not too overworked. I wanted to follow up to this question and see if you guys had an example for how this would work or a codepen or feature that I missed while digging through the documentation... Please let us know if you have any direction as this seems to be a common struggle. Thank a lot!

[fhurta]

I put together some working example using shape, check this out

[leifdejong]

@fhurta you're the man! Thanks

[jayfresh]

@fhurta 👍

[backgroundColor]

const gd = this.refs.headerLine
const d3 = Plotly.d3
gd.on('plotly_hover', (data) => {
      const originTooltip = document.querySelector('.hovertext')
      const rectH = d3.select(gd).select('.xy').select('rect').attr('height')
      const transformAttr = originTooltip.getAttribute('transform')
      const translate = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(transformAttr)
      const translateX = parseInt(translate[1])
      const translateY = parseInt(translate[2])
      const xAxisH = d3.select(gd).select('.xaxislayer')[0][0]
      const xAxisTranslateY = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xAxisH.getAttribute('transform'))[2]
      let toolMarker, sheet
      const stylesheets = document.styleSheets
      if (document.querySelector('.toolMarker')) {
        toolMarker = document.querySelector('.toolMarker')
      } else {
        toolMarker = document.createElement('div')
        document.createElement('div')
        toolMarker.style.position = 'absolute'
        toolMarker.style.zIndex = '10000'
        toolMarker.setAttribute('class', 'toolMarker')
        this.refs.headerLine.appendChild(toolMarker)
      }
      toolMarker.style.left = `${translateX - 3}px`
      toolMarker.style.top = `${translateY - 3}px`

      if (stylesheets) {
        sheet = stylesheets[stylesheets.length - 1]
      } else {
        const style = document.createElement('style')
        document.head.appendChild(style)
      }
      const cssRulesLength = sheet.cssRules.length
      sheet.insertRule(`.toolMarker::after{height:${rectH}px; top:${xAxisTranslateY - translateY}px}`, cssRulesLength)
    }).on('plotly_unhover', (data) => {
      const sheet = document.styleSheets[document.styleSheets.length - 1]
      sheet.deleteRule(sheet.cssRules.length - 1)
      document.querySelector('.toolMarker').remove()
    })

I passsed this method to achieve