You must be logged in to post your query.
Home › Forums › StockChart Support › Pragmatically get axisX.stripLines label
Tagged: Stock Chart
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?
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.
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.
Based off https://canvasjs.com/forums/topic/getting-x-y-of-data-point/ I think i figured out how
chart.charts.axisX.convertValueToPixel(chart.charts.options.axisX.stripLines.value) // returns negative if outside of view, positive when in the view
chart.charts.axisY.convertValueToPixel(0) // returns the bottom of the chart
will play around with this to see how far i make it
hmmm, y axis is off… graphing NVDA over the past 3m shows the min value of 500, but
document.getElementById(“chartContainer”).offsetTop + chart.charts.axisY.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.axisY.convertValueToPixel(510) – chart.charts.height – chart.charts.height
any idea how to fix the y axis to point to the actual bottom of the chart?
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.container.offsetTop + stockChart.charts.axisY.convertValueToPixel(stockChart.charts.axisY.viewportMinimum)
Also, kindly take a look at this JSFiddle for an example on calculating the starting/bottom point of y-axis.
You must be logged in to reply to this topic. Login/Register