@Composable
fun ExpensesGraph(paddingValues: PaddingValues) {
    val db = FirebaseFirestore.getInstance()

    // Define your timeframes
    val timeFrames = listOf("Daily", "Weekly", "Monthly", "Yearly")
    val selectedIndex = remember { mutableStateOf(0) }

    // Fetch and process the expenses data
    val chartEntries = remember { mutableStateOf(entriesOf(*arrayOf<Float>())) }
    val chartModelProducer = ChartEntryModelProducer(chartEntries.value)
    val markers = remember { mutableStateOf<Map<Float, Marker>>(emptyMap()) }
    
    fun fetchExpensesData(timeFrame: String) {
        val startCalendar = Calendar.getInstance()
        val endCalendar = Calendar.getInstance()
        var dateFormat: SimpleDateFormat

        when (timeFrame) {
            "Daily" -> {
                // Daily: Showing 7 days in a week
                startCalendar.set(Calendar.DAY_OF_WEEK, startCalendar.firstDayOfWeek + 1)
                startCalendar.set(Calendar.HOUR_OF_DAY, 0)
                startCalendar.set(Calendar.MINUTE, 0)
                startCalendar.set(Calendar.SECOND, 0)
                startCalendar.set(Calendar.MILLISECOND, 0)
                endCalendar.set(Calendar.DAY_OF_WEEK, startCalendar.firstDayOfWeek + 1)
                endCalendar.add(Calendar.DATE, 6)
                endCalendar.set(Calendar.HOUR_OF_DAY, 0)
                endCalendar.set(Calendar.MINUTE, 0)
                endCalendar.set(Calendar.SECOND, 0)
                endCalendar.set(Calendar.MILLISECOND, 0)
                dateFormat = SimpleDateFormat("EEEE_dd_MMM_yyyy", Locale.getDefault())

            }

            "Weekly" -> {
                // Weekly: Showing 4 weeks in a month
                startCalendar.set(Calendar.DAY_OF_MONTH, 1)
                startCalendar.set(Calendar.HOUR_OF_DAY, 0)
                startCalendar.set(Calendar.MINUTE, 0)
                startCalendar.set(Calendar.SECOND, 0)
                startCalendar.set(Calendar.MILLISECOND, 0)
                endCalendar.set(
                    Calendar.DAY_OF_MONTH,
                    startCalendar.getActualMaximum(Calendar.DAY_OF_MONTH),
                )
                endCalendar.set(Calendar.HOUR_OF_DAY, 0)
                endCalendar.set(Calendar.MINUTE, 0)
                endCalendar.set(Calendar.SECOND, 0)
                endCalendar.set(Calendar.MILLISECOND, 0)
                dateFormat = SimpleDateFormat("W_MMM_yyyy", Locale.getDefault())
            }

            "Monthly" -> {
                // Monthly: Showing 12 months in a year
                startCalendar.set(Calendar.MONTH, 0)
                startCalendar.set(Calendar.DAY_OF_MONTH, 1)
                startCalendar.set(Calendar.HOUR_OF_DAY, 0)
                startCalendar.set(Calendar.MINUTE, 0)
                startCalendar.set(Calendar.SECOND, 0)
                startCalendar.set(Calendar.MILLISECOND, 0)
                endCalendar.set(Calendar.MONTH, 11)
                endCalendar.set(
                    Calendar.DAY_OF_MONTH,
                    endCalendar.getActualMaximum(Calendar.DAY_OF_MONTH)
                )
                endCalendar.set(Calendar.HOUR_OF_DAY, 0)
                endCalendar.set(Calendar.MINUTE, 0)
                endCalendar.set(Calendar.SECOND, 0)
                endCalendar.set(Calendar.MILLISECOND, 0)
                dateFormat = SimpleDateFormat("MMM_yyyy", Locale.getDefault())
            }

            "Yearly" -> {
                startCalendar.set(Calendar.MONTH, 0)
                startCalendar.set(Calendar.DAY_OF_MONTH, -1)
                startCalendar.set(Calendar.HOUR_OF_DAY, 0)
                startCalendar.set(Calendar.MINUTE, 0)
                startCalendar.set(Calendar.SECOND, 0)
                startCalendar.set(Calendar.MILLISECOND, 0)
                endCalendar.set(Calendar.MONTH, 11)
                endCalendar.set(Calendar.DAY_OF_MONTH, 31)
                endCalendar.set(Calendar.HOUR_OF_DAY, 0)
                endCalendar.set(Calendar.MINUTE, 0)
                endCalendar.set(Calendar.SECOND, 0)
                endCalendar.set(Calendar.MILLISECOND, 0)
                dateFormat = SimpleDateFormat("yyyy", Locale.getDefault())
            }

            else -> {
                throw IllegalArgumentException("Unsupported time frame: $timeFrame")
            }
        }

        val query = db.collection("expenses")
            .document("Kantin")
            .collection(timeFrame.lowercase())

        query.get().addOnSuccessListener { result ->
            val expenses = mutableListOf<Pair<Float, Date>>()
            for (document in result) {
                val total = document.getDouble("total")?.toFloat() ?: 0f
                val date = dateFormat.parse(document.id) ?: Date()
                expenses.add(total to date)

                println("Document: ${document.id}, Total: $total, Date: $date")
            }
            println(startCalendar.time)
            println(endCalendar.time)
            expenses.retainAll { it.second >= startCalendar.time && it.second <= endCalendar.time }

            // Sort the expenses by date
            expenses.sortBy { it.second }

            chartEntries.value =
                entriesOf(*expenses.mapIndexed { index, expense -> index.toFloat() to expense.first }
                    .toTypedArray())

        }

    }
    
    LaunchedEffect(Unit) { fetchExpensesData(timeFrames[selectedIndex.value]) }
    
    Column(modifier = Modifier.padding(paddingValues)) {
        timeFrames.forEachIndexed { index, timeFrame ->
            Button(
                onClick = {
                    selectedIndex.value = index
                    fetchExpensesData(timeFrame)
                },
                colors = ButtonDefaults.buttonColors(
                    containerColor = if (selectedIndex.value == index) DarkGray else LightGray
                )
            ) {
                Text(timeFrame)
            }
        }
        ProvideChartStyle(chartStyle = m3ChartStyle()) {
            Chart(
                chart = columnChart(),
                chartModelProducer = chartModelProducer,
                startAxis = startAxis(),
                bottomAxis = bottomAxis(),
            )
        }
    }
}

this is my expenses graph screen, right now the amount of x axis will be dependent to the amount of document in the firestore, I want it to be persistent so for example in my daily timeframe it will always show Monday to Sunday in the x axis even though there is still no data for Wednesday to Sunday

this is the bottomAxis composable from the library

@Composable
public fun bottomAxis(
    label: TextComponent? = axisLabelComponent(),
    axis: LineComponent? = axisLineComponent(),
    tick: LineComponent? = axisTickComponent(),
    tickLength: Dp = currentChartStyle.axis.axisTickLength,
    tickPosition: HorizontalAxis.TickPosition = HorizontalAxis.TickPosition.Edge,
    guideline: LineComponent? = axisGuidelineComponent(),
    valueFormatter: AxisValueFormatter<AxisPosition.Horizontal.Bottom> = DecimalFormatAxisValueFormatter(),
    sizeConstraint: Axis.SizeConstraint = Axis.SizeConstraint.Auto(),
    titleComponent: TextComponent? = null,
    title: CharSequence? = null,
    labelRotationDegrees: Float = currentChartStyle.axis.axisLabelRotationDegrees,
): HorizontalAxis<AxisPosition.Horizontal.Bottom> = createHorizontalAxis {
    this.label = label
    this.axis = axis
    this.tick = tick
    this.guideline = guideline
    this.valueFormatter = valueFormatter
    this.tickLengthDp = tickLength.value
    this.tickPosition = tickPosition
    this.sizeConstraint = sizeConstraint
    this.labelRotationDegrees = labelRotationDegrees
    this.titleComponent = titleComponent
    this.title = title
}