Как сделать, чтобы на графике показывались координаты курсора x и y относительно како

[raja]

Допустим, есть какой-то график в блоке. как сделать, чтобы, если курсор над блоком, в режиме реального времени от курсора вниз и влево тянулись прямые к осям координат, и отображались координаты?
как на прикреплённом изображении.

[raja]

а если он ещё никак не сделан? надо с нуля это сделать. как вычислить координаты курсора относительно левого нижнего угла блока и выводить линии влево и вниз в реальном времени?

[raja]

Я сделал как надо, но теперь при наведении на синий квадрат координаты отображаются неправильно. Как сделать, чтобы синий квадрат не влиял на отображение координат?

<div id="outer" style="margin:100px; position: relative;">
	<div id="block" style="border: 1px solid black; width: 400px; height: 400px">
		<div style="border: 1px solid black; width: 100px; height: 100px; margin: 50px; background-color: blue;"></div>
	</div>
</div>
<style>
.sign, #block{
	position: absolute;
}
.perpe{
	border: 1px dashed #d4d4d4;
	border-bottom: none;
	border-left: none;
	position: absolute;
	pointer-events: none;
	//bottom: 0px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

	const block = document.querySelector('#block')

	block.addEventListener('mousemove', function (e) {
		//console.log(e.offsetX, e.offsetY);
		var height = $(this).height();
		var Y = $(this).height() - e.offsetY;
		$('.sign').remove();
		$('.perpe').remove();
		$('#outer').append('<div class="perpe" style="top: '+e.offsetY+'; width: '+e.offsetX+'; height: '+Y+'; "></div>');
		$('#outer').append('<div class="sign" style="top: '+e.offsetY+'; left: -25px; ">'+Y+'</div>');
		$('#outer').append('<div class="sign" style="top: '+height+'; left: '+e.offsetX+'; ">'+e.offsetX+'</div>');
	});
	block.addEventListener('mouseout', function (e) {
		$('.sign').remove();
		$('.perpe').remove();
	});
</script>

https://playcode.io/1935906