Pragmatically get axisX.stripLines label

[ekaqu1028]

I am using axisX.stripLines as a means to show different stock events (earnings, dividends, etc.) and would like to make the label interactive to allow a tooltip hover or pressing to show more details. To do this I would like to know how to get the offset so i could add such an event?

[Indranil]

@ekaqu1028,

Mouse events like click, mouseover, mouseout, etc. are not available on the stripline/axes labels as of now. Hence, it’s not possible to show toolTip on interaction with labels as of now.

___________
Indranil Deo
Team CanvasJS

[ekaqu1028]

I am fine without mouseover events, but was wondering if I can get the offset of the label so i can add my own div to simulate this?

Another way of looking at it, is there a way to get the position of a single X axis point? If i know the X axis offset and the bottom of the chart, i can overlay my own thing.

[ekaqu1028]

Based off https://canvasjs.com/forums/topic/getting-x-y-of-data-point/ I think i figured out how

chart.charts[0].axisX[0].convertValueToPixel(chart.charts[0].options.axisX.stripLines[44].value) // returns negative if outside of view, positive when in the view
chart.charts[0].axisY[0].convertValueToPixel(0) // returns the bottom of the chart

will play around with this to see how far i make it

[ekaqu1028]

hmmm, y axis is off… graphing NVDA over the past 3m shows the min value of 500, but

document.getElementById(“chartContainer”).offsetTop + chart.charts[0].axisY[0].convertValueToPixel(510)

returns 713.6666666666666, which puts the div element off screen. When I manually place it the value should be 225. I also tried subtracting the other charts (volume + MACD) but the result is still off screen…

document.getElementById(“chartContainer”).offsetTop + chart.charts[0].axisY[0].convertValueToPixel(510) – chart.charts[1].height – chart.charts[2].height
553.6666666666666

any idea how to fix the y axis to point to the actual bottom of the chart?

• This reply was modified 3 years, 6 months ago by ekaqu1028.
• This reply was modified 3 years, 6 months ago by ekaqu1028.

[Indranil]

@ekaqu1028,

In the code sample shared by you, the offsetTop value of chartContainer is added to the pixel coordinate of the axisY. The chartContainer contains the complete stockChart. Hence, to calculate the pixel coordinate of y-axis for a specific chart you need to add the offsetTop value of the chart with the pixel coordinate of the axisY as shown below –

stockChart.charts[1].container.offsetTop + stockChart.charts[1].axisY[0].convertValueToPixel(stockChart.charts[1].axisY[0].viewportMinimum)

Also, kindly take a look at this JSFiddle for an example on calculating the starting/bottom point of y-axis.

___________
Indranil Deo
Team CanvasJS