Feature Request: Implement mouse tracking lines on chart

[darkerthan-black]

I want to implement vertical and horizontal lines tracking the mouse cursor on the chart.

To do this, a feature that converts the mouse cursor's absolute coordinates into relative coordinates on the chart is needed.

And for this, an API that can determine the size of the chart is necessary.

[gsteckman]

This is also required for #50.

The VerticalLineAnnotation and HorizontalLineAnnotation functions can be used to draw lines on the graph, avoiding the need to leak the size of the chart. But you need to provide it with a coordinate at which to draw the line, which is where the missing mouse position is needed.

[joffrey-bion]

I would love to see this feature built-in too! I can't seem to find how to get hover effects in general with values of the different series where the mouse cursor is

[OriolCrespo]

So I found a way of finding the positon using the experimental api from compose (I'm sure you can make it work with the stable one too (see here)

Just add a Box to your XYGraph:

val xAxisModel = rememberFloatLinearAxisModel(...)
val yAxisModel = rememberFloatLinearAxisModel(...)
var pointerPosition by remember { mutableStateOf(Point(0f, 0f)) }

Text("Mouse position $pointerPosition")
XYGraph(xAxisModel = xAxisModel, yAxisModel = yAxisModel) {
    Box(Modifier.fillMaxSize().onPointerEvent(PointerEventType.Move) {
                            pointerPosition = pointerPosition(it, xAxisModel, yAxisModel)
                        })
    ...
}
...
private fun AwaitPointerEventScope.pointerPosition(
    event: PointerEvent,
    xAxisModel: FloatLinearAxisModel,
    yAxisModel: FloatLinearAxisModel
): Point<Float, Float> = Point(
    getPointerPosition(
        this.size.width.toFloat(),
        event.changes.first().position.x,
        xAxisModel
    ),
    getPointerPosition(
        this.size.height.toFloat(),
        this.size.height.toFloat() - event.changes.first().position.y,
        yAxisModel
    )
)

private fun getPointerPosition(
    graphHeight: Float,
    position: Float,
    axisModel: FloatLinearAxisModel
): Float {
    return axisModel.viewRange.value.start + position / graphHeight * (axisModel.viewRange.value.endInclusive - axisModel.viewRange.value.start)
}

Recording.mov