Unable to align the text of a GuideLineLayer to anything other than left

[ismith78]

Bug report

I've got a bar graph using a GuideLineLayer in a similar way to the Space Race example at http://plottablejs.org/examples/spacerace/.

I have the same fault as can be seen with the example where when I hover over the last item (First Man on the Moon) as the label is aligned to the left of the gridline the text cannot be displayed due to lack of room.

The documentation refers to xAlignment which takes the arguments "left", "centre" and "right"which I assumed refers to the placement of the label.

However any change to either xAlignment or yAlignment has no effect and the label is always shown at the bottom left of the gridline regardless of these values.

My plan was to detect where the mouse is hovering over the graph in the onPointerMove and change the xAlignment accordingly.

Live example URL: (unable to get jsfiddle to work but this issue can be easily seen using the demo at http://plottablejs.org/examples/spacerace/)

Steps to repro:

1. Create a Plottable.Components.GuideLineLayer
2. Set the xAlignment to "centre"
3. Allow the graph to be drawn normally

Expected behavior

The text label of the date for the gridline should be centre to the guideline

Actual behavior

The text label of the date for the gridline is always bottom left regardless of what xAlignment, or yAlignment is set to. however calling the getter for these methods returns what I have set the value.

Possible Solution

The text label should respect the alignment and update accordingly.

Context

Ensuring that the date label can be seen regardless of where on the graph the mouse is currently hovering over.

Environment

• Plottable version: 3.8.6
• Browser name/version: Google Chrome Version 75.0.3770.100 (Official Build) (64-bit)
• OS name/version: MacOS 10.14.5