dot position is not in correct position

[Maxyjy]

as you can see '4' should be mid of '3' and '5', but now it's little lower, maybe because the max value is too small?

the other issue is when max value too small (below 4), Y axis value will duplicate, and dot position goes wrong

very apperciate if author can fix those issue, you did great work in this project, it helped me alot

[ehsannarmani]

Hi @Maxyjy , which version of lib you are using?

[Maxyjy]

@ehsannarmani latest version, i just found out i can manually set chart's max value to avoid this

[ehsannarmani]

@Maxyjy , yeah but we fixed the issue in latest version, we force increase max value to avoid this issue in latest version, are you using 0.1.10 and you have problem with this?

[ehsannarmani]

if yes, please provide you'r code which have problem in showing indicators

[Maxyjy]

`package com.redteamobile.esimaccess.ui.component

import androidx.compose.animation.core.EaseInOutCubic
import androidx.compose.animation.core.tween
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.redteamobile.esimaccess.const.colorText
import com.redteamobile.esimaccess.const.colorText40
import com.redteamobile.esimaccess.const.colorText90
import com.redteamobile.esimaccess.const.colorTheme
import com.redteamobile.esimaccess.const.colorWhite
import com.redteamobile.esimaccess.expect.log
import ir.ehsannarmani.compose_charts.LineChart
import ir.ehsannarmani.compose_charts.extensions.format
import ir.ehsannarmani.compose_charts.models.AnimationMode
import ir.ehsannarmani.compose_charts.models.DividerProperties
import ir.ehsannarmani.compose_charts.models.DotProperties
import ir.ehsannarmani.compose_charts.models.DrawStyle
import ir.ehsannarmani.compose_charts.models.GridProperties
import ir.ehsannarmani.compose_charts.models.HorizontalIndicatorProperties
import ir.ehsannarmani.compose_charts.models.LabelHelperProperties
import ir.ehsannarmani.compose_charts.models.LabelProperties
import ir.ehsannarmani.compose_charts.models.Line
import ir.ehsannarmani.compose_charts.models.LineProperties
import ir.ehsannarmani.compose_charts.models.PopupProperties
import ir.ehsannarmani.compose_charts.models.StrokeStyle

@composable
fun RowScope.OverviewChart(
label: String,
popUpHint: String,
map: Map<String, Int>
) {
val gridProperties = GridProperties(
xAxisProperties = GridProperties.AxisProperties(
thickness = .2.dp,
color = SolidColor(Color.Gray.copy(alpha = .5f)),
style = StrokeStyle.Dashed(intervals = floatArrayOf(15f, 15f), phase = 10f),
),
yAxisProperties = GridProperties.AxisProperties(
thickness = .2.dp,
color = SolidColor(Color.Gray.copy(alpha = .5f)),
style = StrokeStyle.Dashed(intervals = floatArrayOf(15f, 15f), phase = 10f),
),
)
val dividerProperties = DividerProperties(
xAxisProperties = LineProperties(
thickness = .2.dp,
color = SolidColor(Color.Gray.copy(alpha = .5f)),
style = StrokeStyle.Dashed(intervals = floatArrayOf(15f, 15f), phase = 10f),
),
yAxisProperties = LineProperties(
thickness = .2.dp,
color = SolidColor(Color.Gray.copy(alpha = .5f)),
style = StrokeStyle.Dashed(intervals = floatArrayOf(15f, 15f), phase = 10f),
)
)

Box(
    modifier = Modifier.padding(end = 8.dp).height(270.dp).padding(top = 12.dp),
    contentAlignment = Alignment.Center
) {
    LineChart(
        modifier = Modifier
            .fillMaxSize(),
        data = listOf(
            Line(
                label = label,
                values = map.values.map { it.toDouble() },
                color = SolidColor(colorTheme),
                strokeAnimationSpec = tween(2000, easing = EaseInOutCubic),
                gradientAnimationDelay = 1000,
                drawStyle = DrawStyle.Stroke(width = 2.dp),
                curvedEdges = false,
                dotProperties = DotProperties(
                    enabled = true,
                    color = SolidColor(colorTheme),
                    strokeWidth = 0.5.dp,
                    strokeColor = SolidColor(colorTheme),
                )
            ),
        ),
        animationMode = AnimationMode.Together(delayBuilder = {
            it * 500L
        }),
        maxValue = maxOf(24.0, (((map.values.maxOrNull() ?: 0) + 9) / 10 * 10).toDouble()),
        minValue = 0.0,
        gridProperties = gridProperties,
        dividerProperties = dividerProperties,
        popupProperties = PopupProperties(
            textStyle = TextStyle(
                fontSize = 12.sp,
                color = colorWhite,
            ),
            mode = PopupProperties.Mode.PointMode(),
            contentBuilder = { dataIndex, valueIndex, value ->
                try {
                    log(
                        "OverviewChart",
                        "dataIndex:${dataIndex} valueIndex:${valueIndex} value:${value}"
                    )
                    val key = map.keys.toList()[valueIndex]
                    "${
                        key.substringAfter(
                            "-",
                            ""
                        )
                    } $popUpHint${map[key]}"
                } catch (e: Exception) {
                    "-"
                }
            },
            containerColor = colorText
        ),
        indicatorProperties = HorizontalIndicatorProperties(
            textStyle = TextStyle(
                fontSize = 10.sp,
                color = colorText
            ),
            contentBuilder = {
                it.toInt().toString()
            }
        ),
        labelHelperProperties = LabelHelperProperties(
            textStyle = TextStyle(
                fontSize = 12.sp,
                color = colorText
            )
        ),
        curvedEdges = false,
        labelProperties = LabelProperties(
            enabled = true,
            labels = map.keys.map {
                if (map.keys.size > 7) {
                    if (map.keys.indexOf(it) % 3 == 0) {
                        it.substringAfter("-", "")
                    } else {
                        " "
                    }
                } else {
                    it.substringAfter("-", "")
                }
            },
            textStyle = TextStyle(
                fontSize = 10.sp,
                color = colorText
            ),
        ),
    )
    if (map.values.all { it == 0 }) {
        Text("No Data", fontSize = 12.sp, color = colorText40)
    }
}

}`

here is my code, and i just found a new problem is popupProperties's contentBuilder function valueIndex is incorrect,
actual index is 3 but given value is 4, actual index is 7 but given value is 8,

dataIndex:0 valueIndex:1 value:0.9999999962747097
dataIndex:0 valueIndex:2 value:7.450580596923828E-9
dataIndex:0 valueIndex:4 value:0.0(actual index is 3)
dataIndex:0 valueIndex:4 value:0.0(actual index is 4)

[Maxyjy]

https://github.com/user-attachments/assets/19012750-90c1-45fa-811c-04db0b9ecb73
please check this video, i replace popup content to show value index, when data size is 30, part of value index is wrong, but is correct when my data size is 15.

[Maxyjy]

https://github.com/user-attachments/assets/19012750-90c1-45fa-811c-04db0b9ecb73 please check this video, i replace popup content to show value index, when data size is 30, part of value index is wrong, but is correct when my data size is 15.
this bug only happen when i set mode to point mode
mode = PopupProperties.Mode.PointMode()

mode = PopupProperties.Mode.Normal works good, just tested it