How to make a cursor to overlap a chart?

Question

How to make a cursor to overlap a chart?

Navigation

#1 by (4 votes)

3

I would like to create a graph type cursor in JavaScript, not by image from css. For example, like this graphic link but with two lines for x and y. (crossover) I know there are libraries for this.

javascript

asked by anonymous 09.12.2014 / 23:59

1 answer

Static Library Timestamp automatically update with current date

score 4 · Accepted Answer

Maybe this is what you are looking for: two lines forming a cross, following the mouse position:

var v = document.querySelector('.cursor-v');
var h = document.querySelector('.cursor-h');
var elBox = document.querySelector('.cursor').getBoundingClientRect();

window.onmousemove = function(e) {
    var mouseX = e.clientX - elBox.left;
    var mouseY = e.clientY - elBox.top;
    
    h.style.top = mouseY + 'px';
    v.style.left = mouseX + 'px';
};

html, body {
    height: 100%;
}

.cursor {
    position: relative;
    width: 100%;
    height: 100%;
}

.cursor-h {
    position: absolute;
    width: 100%;
    height: 0;
    border-top: 1px solid red;
}

.cursor-v {
    position: absolute;
    width: 0;
    height: 100%;
    border-left: 1px solid red;
}

<div class="cursor"><div class="cursor-h"></div><div class="cursor-v"></div></div>