Search code examples
lightningchart

How to get the width in pixels of a Y Axis and/or set the width explicitly

I am trying to perform my own logic for hit testing and have dynamic Y Axis that exist within my lightningchart JS charts. At the moment I am off by the amount of pixels that the axis is taking up, but have not found a way to determine this value. Axis documentation shows the use of Axis.getHeight() which returns the height in pixels for the X Axis.

Is there a way to set/read the width of Y Axis in LightningCharts JS?

Thanks

Edit: As requested for more information.

I am using pointer down/move/end/out to detect finger/pointer/mouse position over the charts. This particular chart presents for example the following data

[x: 0, y: 20]
[x: 3600, y: 21]
[x: 86400, y: 19]

Where x is time in seconds and y is temperature in Celsius. This will be represented as a lineseries for visual but also a point series for interaction. Users will be able to drag the points up/down based on an interval of say 0.5C and left/right based on a time interval of say 600 (5 minutes).

On tablet, this interaction must be performed by first tapping on the point (to activate it, and present a tooltip) and then dragging the point. This is to prevent conflict with panning/zooming the chart.

All of the above has been developed and is working for the exception of when the YAxes are visible and impact the chart spacing.

I need a way to calculate very specifically the width of all yAxes collectively to support the manual hit testing logic.

Solution

  • Could you elaborate what kind of hit testing you are doing? It is possible that there is a better way to do it than something based on Axis height, hence I am asking.

    The getHeight() method is available for both X and Y axis. To use it for Y axis, just do chart.getDefaultAxisY().getHeight(). However, this method is a bit unreliable - the result can be a frame behind. For example, if you use it immediately when the chart is created, it might return a wrong value. A possible workaround is to use it after a timeout.

    Another way to know for sure the width of Y axis is to explicitly configure it yourself with Axis.setThickness(100). This would make the Axis 100 pixels wide always.