Can I use this library for interactive charts?

[av4625]

val data = buildList {
    for (i in 1..10) {
       add(DefaultPoint(i.toFloat(), i * i.toFloat()))
    }
}

XYGraph(
    rememberLinearAxisModel(data.autoScaleXRange()),
    rememberLinearAxisModel(data.autoScaleYRange())
) {
    LinePlot(
        data,
        lineStyle = LineStyle(SolidColor(Color.Blue))
    )
}

I am very new to KMP and CMP and I am currently trialling it with this library for a small chart app I want to make.

Currently running on desktop. When I hover or click on the chart nothing happens. I think that hovering is a supported feature but I can't work out how to use it. Is there a tutorial on how to use this instead of examples with "a lot" of code and no explanation?

Maybe something like this but with all features (like hover).

Some of the features I want and would like to be able to do are:

1. Is there a way to show a spike line and tool tip on hover?
2. If I have 2 line charts is there a way to, hover on chart one and programatically show a spike line and tool tip on chart one and chart two as they have related data?
3. Can you have two or more line charts above each other with a common x axis like the image, then a spike line could run through them all?

[gsteckman]

The documentation is always a work in progress. I haven't documented the HoverableElementArea functionality because since I wrote that Compose has introduced a multi platform TooltipBox which should make it obsolete.

You should be able to use TooltipBox on a symbol, but I haven't tried it yet. If you want to use the existing hoverable capability, have a look at LineChartSample.kt lines 133-145. Essentially you need to add a modifier to the symbol, something like this:

modifier = Modifier.hoverableElement { Text(point.y.toString()) }

If you want to take some action when the mouse is over the symbol, you should be able to use Modifier.pointerInput. Then you could cause an annotation to be drawn, like a vertical line at the x-axis coordinate of the symbol that the pointer is over.

If you have two charts, you should use the pointerInput modifier on a symbol, and then set a state variable that will cause whatever annotations you want to draw on both charts to be drawn.

Since the symbols are just Composables, all of the common Compose techniques should work to implement interactivity.

The third item you are asking about is not intrinsically available, but you could layout three charts in a vertical column with the same x-axis range, don't display x-axis labels on the top two charts (this might be what you did for the image you included which gets you 90% of the way there), and then draw a vertical line annotation on each chart. The vertical line wouldn't cross the gap between the top of one chart and the bottom of the 2nd chart, but it would come close to what I think you are looking for.

What is not available but might be an interesting feature is to have a callback to track mouse movement over the graph surface, with coordinates in graph-space provided, so for example you could draw an annotation (e.g. vertical and horizontal lines) that follows the mouse cursor as it moves anywhere within the graph, not only when it hovers over a symbol.