Customizing Bottom-Axis Labels to Show Dates Not Working in Vico 2.0.0-alpha.19

[jalalaghazadeh]

I need to customize the bottom-axis labels to show dates instead of numbers. In Vico 1.3.0, this was possible as explained in issue #105. However, the method described does not work in the latest version, Vico 2.0.0-alpha.19.

It appears that the series function now only accepts two collections for x and y values, and custom Entry objects can no longer be passed. I attempted to convert dates to milliseconds and pass the equivalent Long values, then convert them back using a value formatter. Unfortunately, this approach results in an ANR.

Is customizing bottom-axis labels to show dates still supported in Vico 2.0.0-alpha.19? If so, please provide a solution or workaround for this issue.

[Gowsky]

Hello! Yes, it is still supported. Please refer to this wiki page which covers this topic. Also, value formatting should not cause any ANR if done correctly. If you have a crash you need help with, share your code.

[jalalaghazadeh]

Is there any similar formatting capability for marker's label too?

Here is what I've tried so far:

val markerLabelListKey = ExtraStore.Key<List<String>>()
LaunchedEffect(Unit) {
        val markerLabels = chartData.markerLabels?.map { it }
        val defaultLabels = chartData.x.map { x -> x.toString() }
        withContext(Dispatchers.Default) {
            modelProducer
                .tryRunTransaction {
                    lineSeries {
                        series(
                            x = chartData.x,
                            y = chartData.y
                        )
                        updateExtras {
                            it[markerLabelListKey] = markerLabels ?: defaultLabels
                        }
                    }
                }
        }
    }

However, I'm not sure how to implement the markerFormatter function. Here is the function signature:

fun markerFormatter(
    context: CartesianDrawContext,
    targets: List<CartesianMarker.Target>,
): CharSequence {
    // TODO: please suggest an implmentation
}

I've read this #696 but it was more about customizing the marker component rather than its value.

[Gowsky]

Yes, it's possible. You can access the ExtraStore like so: context.model.extraStore and retrieve your labels using the markerLabelListKey. You can retrieve the x axis value from the targets parameter and associate it with a label.