Selected / unselected states for column

[Curwe]

I've been looking in the wiki and example project and was unable to find this, but maybe I'm just blind.

I would like to be able to click a column, highlight the selected one with different color compared to the other columns, like making them gray or something. Would this be possible?

I've tried using the MarkerVisibilityChangeListener, take the markerEntryModels.first().entry.x and set a new columnChar.columns whit a new color where x is the same but it's not working.

var markerEntries by remember { mutableStateOf<Float?>(null) }
    val columns = remember(markerEntries) {
        entries.map { entry ->
            val isXSame = entry.x == markerEntries
            Log.e("GraphTesting", "is x same $isXSame, marked X $markerEntries, entry x ${entry.x}")
            LineComponent(
                if (isXSame) Color.Blue.toArgb() else Color.Red.toArgb(),
                4f,
                Shapes.roundedCornerShape(30)
            )
        }
    }

Even if the isXSame logs true the color stays red.

Also a side not is that when I do this, the graph is redrawn and flash, so it does not look good in that instance.

[Curwe]

Edit: Attached the wrong label, sorry about that.

[patrickmichalik]

It’s all good.

[patrickmichalik]

Hello! Unfortunately, this isn’t possible at the moment (at least not without a significant number of overrides), but we’ll be looking into adding such functionality. Thanks for the suggestion!

[arefhosseini]

I've been looking into it. There is a alternative option to change the selected column.

You can create your own MarkerComponent and in the draw implementation you can replace the following method with the default one:

private fun drawGuideline(
        context: DrawContext,
        bounds: RectF,
        markedEntries: List<Marker.EntryModel>,
    ) {
        markedEntries
            .map { Pair(it.location.x, it.location.y) }
            .toSet()
            .forEach { (x, y) ->
                guideline?.drawVertical(
                    context,
                    y,
                    bounds.bottom,
                    x,
                )
            }
    }