version 2.0.0-alpha.19 custom marker value formatter issue

[virtualpathum]

Hi,
I upgraded my Vico version from 2.0.0-alpha.11 to 2.0.0-alpha.19. Looks like my CustomMarkerLabelFormatter doesn't show the rounded border around the marker now. When I use the rememberMarker(), I can see the background shape appearing but I cannot pass my CustomMarkerLabelFormatter to the default rememberMarker() as I did in 2.0.0-alpha.11.

Is there a way to fix this?

This is how I call my CustomMarkerLabelFormatter. (what is the purpose of the label here? it would be ideal if we can pass custom labels to the marker from here. )

        val marker = rememberDefaultCartesianMarker(
            label = TextComponent.build {},
            valueFormatter = CustomMarkerLabelFormatter(topBarLabel = " Byp/Thru:", bottomBarLabel = " Breakdown:"),
            labelPosition = DefaultCartesianMarker.LabelPosition.AbovePoint,

        )

This is my custom class. I am not sure how to draw that background shape here. :(

class CustomMarkerLabelFormatter(private val topBarLabel: String, private val bottomBarLabel: String) : DefaultCartesianMarkerValueFormatter() {

    override fun format(
        context: CartesianDrawContext,
        targets: List<CartesianMarker.Target>,
    ): CharSequence {
        val labelBuilder = SpannableStringBuilder()

        targets.forEach { target ->
            when (target) {
                is ColumnCartesianLayerMarkerTarget -> {
                    if (target.columns.isNotEmpty()) {
                        // Calculate and append the sum of y-values
                        val totalY = target.columns.sumOf { it.entry.y }.toInt()
                        labelBuilder.append("$totalY")

                        // Add the label for the first element
                        labelBuilder.appendCompat(
                            " $bottomBarLabel${target.columns[0].entry.y.toInt()}",
                            ForegroundColorSpan(target.columns[0].color),
                            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
                        )

                        // If there are more than one elements, add the label for the second element
                        if (target.columns.size > 1) {
                            labelBuilder.appendCompat(
                                " $topBarLabel${target.columns[1].entry.y.toInt()}",
                                ForegroundColorSpan(target.columns[1].color),
                                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
                            )
                        }
                    }
                }

            }
        }
        return labelBuilder
    }

[patrickmichalik]

Hello! CartesianMarkerValueFormatters don’t draw anything, and neither did MarkerLabelFormatters. The only responsibility of implementations of these interfaces is formatting values for display, hence the CharSequence return type.

Drawing is performed by TextComponent. A distinction should be made between the label text and the TextComponent that draws the label. The purpose of the label parameter of rememberDefaultCartesianMarker is to let you pass a TextComponent and customize such properties as the font, the text size, and—most importantly here—the background. Indeed, as can be seen here, the rememberMarker function from the sample app, which you were previously using, creates a TextComponent with a rounded background. (Note that rememberTextComponent is used—TextComponent.build shouldn’t be used in Compose.) On the other hand, the code that you’ve shared creates a plain TextComponent with no background. You can re-add the background in two ways.

The first approach is to keep using rememberMarker, remembering to copy over the appropriate revision. You can apply a custom CartesianMarkerValueFormatter as shown in the Marker.kt patch below. You can instantiate CustomMarkerLabelFormatter right in rememberMarker, or you can add a CartesianMarkerValueFormatter parameter to rememberMarker.

@@ -80,6 +80,7 @@
     return remember(label, labelPosition, indicator, showIndicator, guideline) {
         object : DefaultCartesianMarker(
             label = label,
+            valueFormatter = /* ... */,
             labelPosition = labelPosition,
             indicator = if (showIndicator) indicator else null,
             indicatorSizeDp = 36f,

The second approach is to modify your existing code so that, like rememberMarker, it applies a background. If you wish to do so, please follow the first link above and copy over the relevant portions of rememberMarker.

Finally, I’m not sure I understand what you’re referring to when you say that “it would be ideal if we could pass custom labels” from rememberDefaultCartesianMarker. This is already possible—there’s a valueFormatter parameter, and CartesianMarkerValueFormatter facilitates label customization. You can use a lambda for conciseness:

rememberDefaultCartesianMarker(
    label = /* ... */,
    valueFormatter = { context, targets -> /* ... */ },
    // ...
)

If rememberDefaultCartesianMarker instead had a String parameter, you’d have no way of adapting the label to the highlighted points and, for example, including their y values. Only static labels could be defined. Could you elaborate on the suggestion?

[virtualpathum]

Hi @patrickmichalik , Thanks a lot for the detailed reply. I went with the first approach and everything looks ok now.

about my comment, well I understand it better now and I agree with you that having a valueFormatter gives more flexibility, but still, when someone needs to add a custom label (especially for stacked charts) they need to follow a similar approach as in my class CustomMarkerLabelFormatter(private val topBarLabel: String, private val bottomBarLabel: String) class. Which I believe will be required for most cases as just showing the y-value only in the marker by default is not very user-friendly (IMO for business users). I was thinking that if the rememberDefaultCartesianMarker could have the option to pass these values which are bound to the respective stack, it would be much more convenient. It is just a nice-to-have feature.

Hope you understand this time and just don't bother about it too much. you guys are doing an awesome job already. 👍

Thanks again!

[Gowsky]

Hello, @virtualpathum. CartesianMarkerValueFormatter handles label creation, so adding this directly to DefaultCartesianMarker would be slightly illogical. However, it could be added as an alternative built-in CartesianMarkerValueFormatter implementation. Feel free to open a feature request.

[patrickmichalik]

You’re welcome, @virtualpathum! Thanks for the kind words.