0

Im implementing the code below in a React, Typescript project.

When hovering over my graph I don't get the nearest entity its roughly 5 years off, on my x-axis(time).

I've tried switching out entityNearest for entityNearestXThenY but it yielded similar results.

Below is my pointer interaction function:

        new Plottable.Interactions.Pointer()
        .attachTo(Chart)
        .onPointerMove(function(p) {
            var entity = hiddenGraph.entityNearest(p);
            var date = parseTime(entity.datum.x);
            var value = currencySymbolNoPrecision(entity.datum.y);
            var displayValue = (value + " • " + date);
            guideline.value(entity.datum.x);
            xAxis.annotatedTicks([entity.datum.x]);
            title.text(displayValue).yAlignment();
        })
        .onPointerExit(function() {
            guideline.pixelPosition(-10);
            xAxis.annotatedTicks([]);
        });

Pointer tracking is also very jumpy. My dataset is the gold price per month since 1950. I've checked the dataset to ensure that there are no problems there.

In the image below my mouse is hovering roughly where the red circle is.

enter image description here

Please let me know if I can provide any further information.

Damian Jacobs
  • 488
  • 6
  • 21

1 Answers1

0

I eventually reached a solution by directly editing the coordinates of the mouse after it had bean calculated:

.onPointerMove(p){ 
    p={x: p.x-(compensationValue), y:p.y} 
    ...
    ...
    ...
}

While I understand this is by far not the best solution to the problem I had, it has managed to resolve the problem and seemingly with no adverse effects on different screen sizes or when nesting components.

Damian Jacobs
  • 488
  • 6
  • 21