Отследить координаты мыши в chartistJS?

Question

[gotohell]

Привет! Есть график координат, нарисован с помощью плагина chartist.js!
Хочу на график положить что то типа линейки для отслеживания мыши, спрашивал у великого гугла он дал мне такой код

document.getElementById('ид_вашего_элемента').onmouseover = function(e) {
  alert('x = ' + e.pageX + '; y = '+e.pageY);
}

Но каким образом его подвязать к плагину chartist.js не знаю!
Подскажите куда копать? или покажите если есть пример на основе chartist.js буду очень признателен!
Спасибо!

https://codepen.io/webmasterotboga/pen/gGgqWb

Comments

[Роман]

element.onmousemove = function(e) {
      console.log('x = ' + e.clientX + '; y = ' + e.clientY);
}

В качестве элемента указать ваш график - при движении курсора по графику в консоль будут выводиться координаты мыши. Разумеется они могут выводиться и под графиком на странице.

[gotohell]

Роман, Спасибо работает, но данные не соответствуют графику!

[Роман]

gotohell, Скорее всего потому что график сдвинут от верхнего левого угла? =) А отсчет мыши, в данном случае, происходит в окне и этот угол как кординаты 0 0. Нужно будет высчитать отступы графика
Вот пример набросал. Посмотрите координаты левого верхнего угла, увидите что выводимые координаты как раз отличаются на отступ блока.

[Роман]

Можно даже вот так красиво сделать.

[gotohell]

Роман, ekvador.kz/ppp как высчитать отступы угла?

[Роман]

gotohell,

let coordX = event.clientX - 360;
      let coordY;
      if(coordX < 0) coordX = 0;
      coord.innerHTML = 'x: ' + coordX + 'y: ' + coordY;

x можно так, с У сложнее

Answer 1

[Роман]

coord.style.top = event.clientY + 'px';
      coord.style.left = event.clientX + 'px';
      let coordX = event.clientX - 360;
      let coordYStart = event.clientY - 380;
      let coordY = String(coordYStart).slice(1) * 12.5;
      if(coordX < 0) coordX = 0;
      if(coordY < 0) coordY = 0;
      coord.innerHTML = 'x: ' + coordX + 'y: ' + coordY;

link

Только проверку Y координаты доработайте.