Always show labels of first and last entry point

[Leyonad]

Hello,
how can I always show the label of the first and last entry point on the x-axis?
Also, how can I set the spacing of these little label indicators on the x-axis so that they match the number and position of the labels?
Last question: How can I get rid of those three points where the first label should be?

val chartEntryModel = entryModelOf(data)
Chart(
    chart = lineChart(
        axisValuesOverrider = AxisValuesOverrider.fixed(
            minY = minY,
            maxY = maxY
        )
    ),
    model = chartEntryModel,
    startAxis = rememberStartAxis(),
    bottomAxis = rememberBottomAxis(
        guideline = null,
        itemPlacer = AxisItemPlacer.Horizontal.default(
            spacing = data.size / 8
        )
    ),
    chartScrollSpec = rememberChartScrollSpec(
        isScrollEnabled = false
    ),
)

[patrickmichalik]

Hello! The default AxisItemPlacer.Horizontal implementation draws labels at even intervals. Which entries are labeled depends on the values of spacing and offset. For example, if you have 12 entries, so long as spacing is a divisor of 12, and offset is zero, the first and last entries will be labeled. If you’d like the labels to be drawn at uneven intervals, you can create a custom AxisItemPlacer.Horizontal implementation. (Since your chart isn’t scrollable, no complex logic is required—getLabelValues can disregard visibleXRange and always return the same list of x values. You can use context.chartValuesManager.getChartValues() to retrieve the chart’s ChartValues.) Regarding the number and positioning of the HorizontalAxis’s ticks, switching to HorizontalLayout.Segmented will produce the desired behavior. Finally, the HorizontalAxis’s first label is truncated because there isn’t enough room for it. With HorizontalLayout.Segmented, you can add horizontal padding to the content area to make room for your HorizontalAxis’s first and last labels. We plan on adding a feature that will automatically add the required amount of padding.

[Leyonad]

Hello, thanks for the reply.
I've just tried adding HorizontalLayout.Segmented for the ticks, but that didn't seem to change anything.

Since your chart isn’t scrollable, no complex logic is required—getLabelValues can disregard visibleXRange and always return the same list of x values. You can use context.chartValuesManager.getChartValues() to retrieve the chart’s ChartValues.

I don't quite understand what you mean by that or how to implement it. If you could provide me with a small example, I would really appreciate it. Since I'm displaying weather data at intervals of 5 or 10 minutes, depending on the type of sensor, I don't want to truncate the data to an even number, as potentially, maximum or minimum values could get lost.

This is my code so far:

    Chart(
        modifier = Modifier.height(200.dp),
        chart = lineChart(
            axisValuesOverrider = axisValuesOverrider,
            lines = lines,
        ),
        model = entryModelOf(data),
        startAxis = rememberStartAxis(
            itemPlacer = AxisItemPlacer.Vertical.default(
                maxItemCount = 6
            ),
            valueFormatter = { value, _ ->
                value.formatToSinglePrecision()
            }
        ),
        bottomAxis = rememberBottomAxis(
            guideline = null,
            itemPlacer = AxisItemPlacer.Horizontal.default(
                spacing = data.size / 6,
                offset = 0,
            ),
            valueFormatter = { value, _ ->
                val timeAtValue = dayStart.setOnlyMinutes(value.toInt() * timeInterval)
                labelTimeFormat.format(timeAtValue)
            },
        ),
        chartScrollSpec = rememberChartScrollSpec(
            isScrollEnabled = false
        ),
        horizontalLayout = HorizontalLayout.Segmented,
    )

[patrickmichalik]

Apologies, I meant HorizontalLayout.FullWidth, not HorizontalLayout.Segmented. Could you apply HorizontalLayout.FullWidth and let me know if, as far as the ticks are concerned, that produces the desired result? Regarding the labels, could you elaborate on how you’d like the HorizontalAxis to behave? Let’s take the chart from the image you’ve shared, ignoring the label truncation for now. There is some extra data past the last label, which is for 17:00. As I understand, you’d like a label to be shown for the last entry, whose timestamp seems to be somewhere between 17:00 and 18:00. However, there isn’t enough room. Below, the red line represents the position of the 17:00 label, and the green line shows where the label for the last entry would be located. What is the desired behavior in this instance?

[Leyonad]

Hello, thanks. HorizontalLayout.FullWidth() is working.

Regarding the labels, the image below demonstrates the desired behavior. I've added labels in the green boxes to illustrate that the first label should be aligned to the left, and the last one should be aligned to the right with no outer padding. This, of course, results in shorter distances to the other labels (as indicated by the red lines). One possible solution would be to remove one inner label (or multiple labels, depending on the width of the first and last labels) so that the distance to each label is the same. By doing this, it wouldn't be possible to manually set the number of labels, but there could be a parameter to set the minimum distance between two labels.

[patrickmichalik]

Thank you, @Leyonad. AxisItemPlacer.Horizontal is a public interface. In addition to instantiating the default implementation, which is done via AxisItemPlacer.Horizontal.default, you can create a custom implementation and pass it to your HorizontalAxis. This enables you to specify for what x values labels should be displayed—see AxisItemPlacer.Horizontal#getLabelValues. The AxisItemPlacer.Horizontal functions’ documentation describes what they should return.

object CustomHorizontalAxisItemPlacer : AxisItemPlacer.Horizontal {
    override fun getLabelValues(
        context: ChartDrawContext,
        visibleXRange: ClosedFloatingPointRange<Float>,
        fullXRange: ClosedFloatingPointRange<Float>,
    ): List<Float> = TODO()

    override fun getMeasuredLabelValues(
        context: MeasureContext,
        horizontalDimensions: HorizontalDimensions,
        fullXRange: ClosedFloatingPointRange<Float>,
    ): List<Float> = TODO()

    override fun getStartHorizontalAxisInset(
        context: MeasureContext,
        horizontalDimensions: HorizontalDimensions,
        tickThickness: Float,
    ): Float = TODO()

    override fun getEndHorizontalAxisInset(
        context: MeasureContext,
        horizontalDimensions: HorizontalDimensions,
        tickThickness: Float,
    ): Float = TODO()
}

It’s not yet possible to specify individual labels’ alignment. We’ll be adding this feature in a future update. At the moment, all labels are centered relative to their x values. Thus, if you’d like the first and last entries’ labels to be visible, you’ll also have to give the Chart some horizontal padding. You can do this via the constructor parameters of HorizontalLayout.FullWidth. Vico 1.13.0 Alpha 7, released yesterday, updates HorizontalLayout.FullWidth to allow for adding unscalable (zoom-independent) padding, which is what I’d recommend using here.

We’ll be looking into improving the default behavior of HorizontalAxis instances in non-scrollable charts and adding more built-in AxisItemPlacer implementations to accommodate a wider range of use cases. Thanks for your feedback!

[patrickmichalik]

I wanted to follow up and let you know that Vico 1.13.0 Alpha 9 introduces the feature mentioned here.

[Leyonad]

Alright, thank you. I will have a look at it.

[claude[bot]]

Following up here, as the main part of this question is now directly supported. Vico 3.3.0 adds the HorizontalAxis label alignment that was outstanding at the time.

There are two new options:

• HorizontalAxis.ItemPlacer.extremes places labels, ticks, and guidelines only at the first and last x values. The first label is end-aligned and the last is start-aligned, so both are anchored to the plot-area edges.
• HorizontalAxis.ItemPlacer.aligned gains a shiftExtremeLabels parameter, which applies that same inward alignment to the outermost labels while keeping regular label spacing in between.

bottomAxis =
  HorizontalAxis.rememberBottom(
    itemPlacer = remember { HorizontalAxis.ItemPlacer.aligned(shiftExtremeLabels = true) }
  )

Unlike addExtremeLabelPadding, neither option shrinks the plot area — the extreme labels are shifted inward instead of CartesianLayer padding being added, which also means they have room to render in full rather than collapsing into an ellipsis. Note that this covers the label-visibility and truncation parts of your question; tick placement is still governed by the ItemPlacer in use, as discussed above.

_{Based on maintainer input.}