x axis point can hold dynamic number for y representations ?

[hadys7s]

Question

i got requiement that i have list of points in different months and i fill the days between those months with days with the same y value the problem is i want x axis hold alot of y points but the problem is that i must give every point in x a label and when i give the unwanted x values empty strings the labels i want to show is showing like this

here is the code

import android.text.TextUtils
import android.util.Log
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import com.patrykandpatrick.vico.compose.cartesian.CartesianChartHost
import com.patrykandpatrick.vico.compose.cartesian.layer.rememberLine
import com.patrykandpatrick.vico.compose.cartesian.layer.rememberLineCartesianLayer
import com.patrykandpatrick.vico.compose.cartesian.rememberCartesianChart
import com.patrykandpatrick.vico.compose.cartesian.rememberVicoZoomState
import com.patrykandpatrick.vico.compose.common.component.rememberTextComponent
import com.patrykandpatrick.vico.compose.common.fill
import com.patrykandpatrick.vico.core.cartesian.HorizontalLayout
import com.patrykandpatrick.vico.core.cartesian.Zoom
import com.patrykandpatrick.vico.compose.cartesian.rememberVicoScrollState
import com.patrykandpatrick.vico.compose.cartesian.segmented
import com.patrykandpatrick.vico.core.cartesian.data.CartesianChartModelProducer
import com.patrykandpatrick.vico.core.cartesian.data.lineSeries
import com.patrykandpatrick.vico.core.cartesian.layer.LineCartesianLayer
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.withContext
import java.time.Instant
import java.time.ZoneId
import java.util.Locale


data class DataPoint(val timestamp: Long, val value: Int, val isOriginal: Boolean = false)

var listOfPoints = fillMissingDates(
    mutableListOf(
        DataPoint(timestamp = 1725148800, value = 1, true),
        DataPoint(timestamp = 1727740800, value = 50, true),
        DataPoint(timestamp = 1730419200, value = 700, true),
        DataPoint(timestamp = 1733011200, value = 17, true),
        DataPoint(timestamp = 1735689600, value = 93, true),
    ),
)


fun fillMissingDates(dataPoints: List<DataPoint>): List<DataPoint> {
    val sortedDataPoints = dataPoints.sortedBy { it.timestamp }
    val result = mutableListOf<DataPoint>()

    var previousDataPoint = sortedDataPoints.first()
    for (dataPoint in sortedDataPoints) {
        var currentDate =
            Instant.ofEpochSecond(previousDataPoint.timestamp).atZone(ZoneId.systemDefault())
                .toLocalDate()
        val nextDate =
            Instant.ofEpochSecond(dataPoint.timestamp).atZone(ZoneId.systemDefault()).toLocalDate()

        while (currentDate < nextDate) {
            val newTimestamp = currentDate.atStartOfDay(ZoneId.systemDefault()).toEpochSecond()
            result.add(DataPoint(newTimestamp, previousDataPoint.value, false))
            currentDate = currentDate.plusDays(1)
        }

        result.add(dataPoint)
        previousDataPoint = dataPoint
    }
    return result
}


@Composable
fun SampleCartesianChart() {

    val modelProducer = remember { CartesianChartModelProducer.build() }
    LaunchedEffect(Unit) {
        withContext(Dispatchers.Default) {
            modelProducer.runTransaction {
                lineSeries {
                    series(
                        List(listOfPoints.size) { index -> index },
                        listOfPoints.map { it.value },
                    )
                }

            }
        }

    }
    ComposeChart1(modelProducer)

}


@Composable
private fun ComposeChart1(modelProducer: CartesianChartModelProducer) {
    val marker = rememberMarker(extraData = listOfPoints)
    CartesianChartHost(
        modifier = Modifier.fillMaxWidth(),
        chart = rememberCartesianChart(
            rememberLineCartesianLayer(
                lineProvider = LineCartesianLayer.LineProvider.series(
                    rememberLine(
                        remember {
                            LineCartesianLayer.LineFill.double(
                                topFill = fill(
                                    Color(
                                        0xFF00B6DE,
                                    ),
                                ),
                                bottomFill = fill(Color(0xFFFC00FF)),
                            )
                        },
                    ),
                ),
            ),
            bottomAxis = rememberBottomAxis(
                guideline = null,
                valueFormatter = bottomAxisValueFormatter,
                line = null,
                tick = null,
                label = rememberTextComponent(
                    color = Color.Black,
                    lineCount = 1,
                    truncateAt = TextUtils.TruncateAt.MARQUEE,
                ),
                itemPlacer = remember {
                    HorizontalAxis.ItemPlacer.default(spacing = 1, addExtremeLabelPadding = true)
                },
            ),
            marker = marker,
            horizontalLayout = HorizontalLayout.segmented(),
        ),
        modelProducer = modelProducer,
        zoomState = rememberVicoZoomState(zoomEnabled = false, initialZoom = Zoom.Content),
        scrollState = rememberVicoScrollState(scrollEnabled = false),
    )
}

fun getFormattedTimestamps(index: Int): String {
    if (index < 0 || index >= listOfPoints.size) {
        return "Invalid index" // Handle invalid index case
    }

    val dataPoint = listOfPoints[index]
    return if (dataPoint.isOriginal) {
        Log.v("Points", epochToArabicDate(dataPoint.timestamp))
        epochToArabicDate(dataPoint.timestamp)
    } else {
        ""
    }
}

val bottomAxisValueFormatter = CartesianValueFormatter { x, chartValues, _ ->
    getFormattedTimestamps(x.toInt())
}


fun epochToArabicDate(epochTimestamp: Long): String {
    val instant = Instant.ofEpochSecond(epochTimestamp)
    val zonedDateTime =
        instant.atZone(ZoneId.of("Asia/Riyadh")) // Replace with appropriate time zone

    // Format the date using Arabic locale
    val formatter = java.time.format.DateTimeFormatter.ofPattern("MMM yy", Locale("ar"))
    return zonedDateTime.format(formatter)
}


```and this the output 

![b8925823-e01d-42ac-8ee2-db95a277a5a4](https://github.com/user-attachments/assets/e2347d42-785d-4249-b76d-9dcc25f4d75d)


### Vico version(s)

2.0.0 alpha 27

### UI framework(s)

Jetpack Compose

[Gowsky]

Hello, @hadys7s. To fix this, you should use HorizontalAxis.ItemPlacer to add labels only for the desired x values. Using empty strings instead is incorrect — an empty label is still a label, so it limits the amount of horizontal space available to adjacent labels. In Vico 2.0.0-beta.1 and later, an exception is thrown when you attempt to use empty strings instead of ItemPlacer.