How to use HorizontalAxis.ItemPlacer to format values in CartesianValueFormatter in beta 2

[virtualpathum]

Question

Hi, I upgraded my vico version from 2.0.0.alpha-19 to 2.0.0-beta.2 and have made the changes as per the release notes.
I have a requirement to move the bottom axis label to the beginning of the column as per the attached image.

I had to implement the getBottomAxisValueFormatterImports function below to handle this due to a real estate issue showing the chart and moving the labels.

        CartesianChartHost(
        modifier = Modifier
            .fillMaxSize(),
        chart =
        rememberCartesianChart(
            rememberColumnCartesianLayer(
                columnCollectionSpacing = columnSpace,
                columnProvider = ColumnCartesianLayer.ColumnProvider.series(createImportsColumns(10)),
                // axisValueOverrider = AxisValueOverrider.fixed(minY = 0f, maxY = yAxisMaxValue),
                mergeMode = { ColumnCartesianLayer.MergeMode.Stacked },
            ),
            startAxis =
            VerticalAxis.rememberStart(
                label = rememberTextComponent(color = Color.Black, textSize = 12.sp),
                line = null,
                itemPlacer = remember { VerticalAxis.ItemPlacer.step({ yAxisItemCount.toDouble() }) },
                tickLength = tickLength,
                labelRotationDegrees = AXIS_LABEL_ROTATION_DEGREES,
                valueFormatter = getStartAxisValueFormatter(),
                guideline = LineComponent(Color.Gray.copy(alpha = 0.2f).toArgb(), 1f),
            ),
            bottomAxis = HorizontalAxis.rememberBottom(
                label = rememberTextComponent(color = Color.Black, textSize = bottomAxisFontSize),
                line = null,
                tickLength = tickLength,
                labelRotationDegrees = AXIS_LABEL_ROTATION_DEGREES,
                itemPlacer = bottomAxisItemPlacerImports,
                valueFormatter = remember { getBottomAxisValueFormatterImports(xAxisData.toList(), isExpanded, displayHours) },
                guideline = null,
            ),
            marker = marker,
            layerPadding = cartesianLayerPadding(scalableStart = 6.dp),
        ),
        scrollState = rememberVicoScrollState(scrollEnabled = isScrollEnabled),
        model = yAxisDataModel,

    )

private val bottomAxisItemPlacerImports = HorizontalAxis.ItemPlacer.aligned(
    spacing = BOTTOM_AXIS_ITEM_SPACING_IMPORTS,
    offset = BOTTOM_AXIS_ITEM_OFFSET_IMPORTS,
    shiftExtremeLines = true,
    addExtremeLabelPadding = false,
)

fun getBottomAxisValueFormatterImports(xAxisData: List<String>, isExpanded: Boolean, displayHours: Int): CartesianValueFormatter {
    return CartesianValueFormatter { _, x, _ ->
        val index = x.toInt()
        if (index < 0 || index >= xAxisData.size) return@CartesianValueFormatter ""
        val spaceLength = calculateSpace(displayHours, isExpanded)

        val space = " ".repeat(spaceLength)
        if (xAxisData.isNotEmpty()) {
            // show only every other value
            if (displayHours >= 8) {
                if (index % 2 == 0) xAxisData[index] + space else ""
            } else {
                xAxisData[index] + space
            }
        } else {
            ""
        }
    }
}

Everything works fine in alpha-19.

Now, when I change the code for beta 2, it gives me the following error.

java.lang.IllegalStateException: CartesianValueFormatter.format returned an empty string. Use HorizontalAxis.ItemPlacer and VerticalAxis.ItemPlacer, not empty strings, to control which x and y values are labeled.
at com.patrykandpatrick.vico.core.cartesian.data.CartesianValueFormatterKt.formatForAxis(CartesianValueFormatter.kt:86)

I appreciate your guidance on this.

Thanks

Vico version(s)

2.0.0-beta.2

UI framework(s)

Jetpack Compose

[Gowsky]

Hello, @virtualpathum. First, regardless of the version, this positioning of the x-axis labels should be achieved via ItemPlacer. Using spaces is unreliable. The positioning may be off for different screen densities, font sizes, etc.

Setting that aside:

How to use HorizontalAxis.ItemPlacer to format values in CartesianValueFormatter

ItemPlacer is used for placing items, not formatting values, hence the name.

As per the error message, the problem is that you're using CartesianValueFormatter instead of ItemPlacer to control the item spacing. It's done here:

if (index % 2 == 0) xAxisData[index] + space else ""

This is incorrect because an empty label differs from no label. Even if it's empty, it's still a component, limiting the width of neighboring labels and potentially truncating them. This has always been the case, but we recently added a check for this as a safeguard against the unwanted truncation it may cause.

Instead of using the workaround with empty strings, you should achieve the desired spacing via ItemPlacer. Based on the code, it seems like this is simply a matter of doubling BOTTOM_AXIS_ITEM_SPACING_IMPORTS.

Also note that the solution where the x values are directly passed to the formatter via xAxisData is incorrect, as it's not synchronized with transactions. You should use extras, as per the documentation.