Vertical line following mouse cursor

[prog8]

Is it possible to draw vertical line on charts which follows the mouse or which can be controlled by method calls? The motivation is that if you have multiple time series charts you may want to show the vertical line on all of charts when you move mouse within one any of them.

[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. 🍻

[fhurta]

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

[0xMachan]

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

[0xMachan]

@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