Creating a marker to snap across multiple bars

[alpriest]

Question

I'm trying to build a Marker which covers multiple bars as you drag. So for example if you touch the 9-10am slot in the graph below it will draw the marker highlighting the various data points - which all share the same timestamp.

On my iOS app charting library I'm able to query an X position for a given datapoint which I use as the rectangle left, and then I repeat for the next date to get the rectangle right position. Is there any way to do this in Vico?

Here's my custom Marker code with the current fiddle of columnCount which i'll inject later.

class StatsVerticalLineMarker(
    private val guideline: LineComponent?
) : Marker {
    override fun draw(context: DrawContext, bounds: RectF, markedEntries: List<Marker.EntryModel>, chartValuesProvider: ChartValuesProvider) {
        val values = chartValuesProvider.getChartValues()

        drawGuideline(context, bounds, markedEntries.first(), values.xStep)
    }

    private fun drawGuideline(
        context: DrawContext,
        bounds: RectF,
        chartEntry: Marker.EntryModel,
        xStep: Float,
    ) {
        val columnCount = 6f
        val xModifier = (xStep * columnCount) * columnCount
        val x = chartEntry.entry.x * xModifier

        guideline?.drawVertical(
            context,
            bounds.top,
            bounds.bottom,
            x,
        )
    }
}

Vico version(s)

compose-m3:1.14.0

UI framework(s)

Jetpack Compose

[Gowsky]

Hello, @alpriest. There isn't a public API for this at the moment, but we'll look into adding one. In the meantime:

• In Vico 2, you can implement this relatively easily by overriding CartesianChart.drawMarker and modifying the logic that determines for what CartesianMarker.Targets the CartesianMarker is drawn.
• In Vico 1, you may be able to implement this by overriding Marker.draw so that, rather than highlighting only the entries in markedEntries, the Marker creates its own list of entries to be highlighted. It can do so based on the x values of the entries in markedEntries. This, however, may be comparatively complex.

[bbetter]

any chance you can help me out with drawing something similar with compose marker i want it to appear to the left of the guideline

[alpriest]

@bbetter I ended up overriding the draw(context: DrawContext, bounds: RectF, markedEntries: List<Marker.EntryModel>, chartValuesProvider: ChartValuesProvider) method and sending the markedEntries (which include a location) out to a mutableStateFlow. Then in the superview I used a Box and another view which tooked the mutableStateFlow and drew based on the location of that.

My code is available at https://github.com/alpriest/EnergyStats-Android/blob/main/app/src/main/java/com/alpriest/energystats/ui/paramsgraph/ParameterGraphVerticalLineMarker.kt

Here's the end result:

[bbetter]

@alpriest , thanks for the help
I see in your code that you're using Marker , i don't think it's available anymore
the cartessianmarker is a thing to go it doesn't have the exact draw method

but it has drawUnderLayers and drawOverLayers one of those I assume i would need to overload
my current approach is to basically copy the defaultcartessianmarker impl just changing the horizontal positioning stuff
to basically position the label either left or right to the guideline depending on if there is enough space

what i want to achieve is something like this
If you know easier way to do it please let me know

[alpriest]

Sorry, i've not migrated to v2 of Vico.