Cubism.js: Ruler doesn't follow the cursor exactly (not on the right location)

Question

My problem is that the ruler doesn't exactly land on the cursor as in the screenshot and I'm not sure where to start looking in order to fix it.

Any advice?

Answer 1

The positioning of the ruler is absolute to the div it's contained within. Therefore, you need to ensure that your div is free from any other styling that may affect this.

For example, using boostrap I had this issue when my horizon graph was within a grid array:

Changing my cubism graph div from:

<div id="graph"></div> to

<div id="graph" style="position:relative" ></div>

The ruler then moved to the right position, without effecting the other styles on the page

Reference issue from cubism's github page: https://github.com/square/cubism/issues/18