Give more space to labels

[Philippe2705]

Hey,

I am trying to display a graph with the day in the x axis, and a value in the y axis.

I use the value formatter to display a label on the x axis only if there is an existing value for this index:

valueFormatter = { index, value ->
                if (value.chartEntryModel.entries.first().any { it.x == index }) {
                    LocalDateTime.now().minusDays(dataPoint.entries.size - index.toLong()).format(DateTimeFormatter.ofPattern("MM/dd"))
                }
                else {
                    ""
                }

Another example here:

Unfortunately, it appear that there is not enough space to display the date with an MM/dd format, even with a text rotation.

Any idea how can I give the x labels enough space to be entirely displayed?

All the best,
Philippe

[patrickmichalik]

Hello! Could you please provide a complete, runnable example? To accurately determine what’s going on, we need to be able to reproduce the problem. Please note that AxisValueFormatter shouldn’t be used to hide labels—the API intended for that purpose is AxisItemPlacer. Even so, the problem may lie somewhere else. Could you also let us know which version of Vico you’re using?

[Philippe2705]

Sure, I am using the 1.13.0-alpha.8 version.

Here is a more extensive example, I removed some parts to make it simpler but it should be enough:

// Gives the test data
val data = entryModelOf(Pair(1,1),Pair(2,3),Pair(3,2),Pair(4,4),Pair(7,5),Pair(8,6),Pair(12,7),Pair(19,3))
val yellow = Color(0xFFFFAA4A)

// the chart
Chart(
        chart = lineChart(
            lines = listOf(
                lineSpec(
                    lineColor = yellow,
                    lineBackgroundShader = verticalGradient(
                        arrayOf(yellow.copy(0.5f), yellow.copy(alpha = 0f)),
                    ),
                ),
            ),
            axisValuesOverrider = AxisValuesOverrider.adaptiveYValues(yFraction = 1f, round = true),
        ),

        chartScrollSpec = rememberChartScrollSpec(
            isScrollEnabled = true,
            initialScroll = InitialScroll.End,
        ),
        modifier = Modifier.height(280.dp),
        model = data,
        startAxis = rememberStartAxis(
            axis = LineComponent(
                color = Color.Gray.toArgb(),
                thicknessDp = 0f,
                shape = Shapes.pillShape,
            ),
            label = axisLabelComponent(
                color = Color.White),
            itemPlacer = AxisItemPlacer.Vertical.default(
                maxItemCount = 4
            )
        ),
        bottomAxis = rememberBottomAxis(

            tickLength = 0.dp,
            axis = LineComponent(
                color = MaterialTheme.colors.surface.toArgb(),
                thicknessDp = 0f,
                shape = Shapes.pillShape,
            ),
            guideline = LineComponent(
                color = MaterialTheme.colors.surface.toArgb(),
                thicknessDp = 0f,
                shape = Shapes.pillShape,
            ),
            labelRotationDegrees = -30f,
            label = axisLabelComponent(
               // The text has to be very small to solve the issue
                textSize = TextUnit(15f, TextUnitType.Sp),
                lineCount = 1,
                color = Color.White,
                ),
            valueFormatter = { index, value ->
                if (value.chartEntryModel.entries.first().any { it.x == index }) {
                    LocalDateTime.now().minusDays(dataPoint.entries.size - index.toLong()).format(DateTimeFormatter.ofPattern("MM/dd"))
                }
                else {
                    ""
                }
},
            itemPlacer = AxisItemPlacer.Horizontal.default(
                spacing = 1,
                offset = 0
            )
        ),

    )

Also, I understand than hiding some value with the formater may not be the right way to do it, if you now any better way I am open to that.
Thanks a lot and all the best,
Philippe

[patrickmichalik]

Thank you! The problem appears to stem from the misuse of AxisValueFormatter. To hide unwanted labels, please use a custom AxisItemPlacer.Horizontal implementation instead. The documentation for the AxisItemPlacer.Horizontal functions describes what they are to return. I would also suggest decreasing or removing the labels’ padding, which you can do via the horizontalPadding and verticalPadding parameters of axisLabelComponent.

[Philippe2705]

Hi @patrickmichalik and thank you for your answer.
I understand I should use a custom AxisItemPlacer.Horizontal to make it cleaner. I will have a look at this and try to improve it.
In the meantime, removing the labels padding mostly solved the issue, as I am now able to print the text bigger, at a more readable size.

All the best,
Philippe

[patrickmichalik]

You’re welcome! Sounds good. If you have any questions, feel free to let me know.

[patrickmichalik]

Should you face an issue where there’s insufficient space for the first and last labels, please consider using HorizontalLayout.FullWidth and Vico 1.13.0 Alpha 9’s automatic padding for extreme HorizontalAxis labels.