如何在 amcharts 中获取 axisRange 的 y 值？

Question

I have a line series chart and I want to add a draggable series range label. On drag event of the label, I want to print the Y value of the chart where the range label is. How can I achieving this?

I've attached an image to make it easier to visualize and understand what I am trying to achieve.

This is what I have tried in code but the value i'm getting is not consistently correct.

const cursorPosition = {
  x: 0,
  y: 0,
}

chart.cursor.events.on('cursorpositionchanged', (ev: any) => {
  const xAxis = ev.target.chart.xAxes.getIndex(0)
  const yAxis = ev.target.chart.yAxes.getIndex(0)
  cursorPosition.x = xAxis.positionToDate(xAxis.toAxisPosition(ev.target.xPosition))
  cursorPosition.y = yAxis.positionToValue(yAxis.toAxisPosition(ev.target.yPosition))
})

const maxRange = valueAxis.axisRanges.create()
maxRange.value = props.max
maxRange.grid.stroke = am4core.color('#00695C')
maxRange.grid.strokeWidth = 2
maxRange.grid.strokeOpacity = 1
maxRange.label.text = 'max'
maxRange.label.fontSize = '18px'
maxRange.label.scale = 0.7
maxRange.label.background.fill = maxRange.grid.stroke
maxRange.label.fill = am4core.color('#fff')
maxRange.label.draggable = true
maxRange.label.inside = true
maxRange.label.x = 0
maxRange.label.y = 0
maxRange.label.isMeasured = true

// Position of max label maxRange.label.maxX = 58
maxRange.label.minX = 58

maxRange.label.events.on('dragged', () => {
  maxRange.value = valueAxis.positionToValue(
    valueAxis.renderer.coordinateToPosition(valueAxis.renderer.pixelHeight - maxRange.label.pixelY)
  )

  console.log(cursorPosition.x)
})

Answer 1

To get the y value of the axisRange in the code you provided, you can use the value property of the axisRange object.

For example:

let yValue = maxRange.value;

This will give you the maximum value of the axisRange, which is set using the value property when the axisRange is created:

maxRange.value = props.max;

Keep in mind that the value property may contain any data type, depending on the type of axis and the data being plotted. For example, if the axis is a date/time axis, the value property may contain a JavaScript Date object.

Additionally, the code you provided includes an event listener that allows the user to drag the label for the axisRange and update its value. The new value is calculated by converting the pixel position of the label to a value using the positionToValue method of the valueAxis:

maxRange.value = valueAxis.positionToValue(
  valueAxis.renderer.coordinateToPosition(valueAxis.renderer.pixelHeight - maxRange.label.pixelY)
);

This new value is then used to update the value property of the axisRange.