Skip to content

Bug in LineChart (gray bars appears out of nowhere) #169

@LeonelZalegas

Description

@LeonelZalegas

Basically no matter what I do, 2 vertical gray bars appears at the beginning (where the Y axis is) and also at the end of the graph, I tried pretty much everything (deleting most of the attributes in Line, changing colors in the axis, etc.) but didn't worked, is like if they were there by default

this is my code:

@Composable
fun IntradayInfoChart(
    infos: List<IntradayInfo>,
    modifier: Modifier = Modifier,
) {
    val points =
        infos.mapIndexed { index, info ->
            Point(
                x = index.toFloat(),
                y = info.close.toFloat(),
            )
        }

    val primaryColor = MaterialTheme.colorScheme.primary
    val onBackgroundColor = MaterialTheme.colorScheme.onBackground
    val backgroundColor = MaterialTheme.colorScheme.background

    val upperValue = (infos.maxOfOrNull { it.close }?.plus(1))?.roundToInt() ?: 0
    val lowerValue = infos.minOfOrNull { it.close }?.toInt() ?: 0
    val priceStep = (upperValue - lowerValue) / 5f

    val yAxisData =
        AxisData.Builder()
            .axisStepSize(30.dp)
            .steps(5)
            .labelData { i ->
                (lowerValue + priceStep * i).roundToInt().toString()
            }
            .labelAndAxisLinePadding(15.dp)
            .axisLineColor(onBackgroundColor)
            .axisLabelColor(onBackgroundColor)
            .build()

    val xAxisData =
        AxisData.Builder()
            .axisStepSize(50.dp)
            .steps(infos.size - 1)
            .labelData { i ->
                infos.getOrNull(i)?.date?.format(DateTimeFormatter.ofPattern("HH:mm")) ?: ""
            }
            .labelAndAxisLinePadding(15.dp)
            .axisLineColor(onBackgroundColor)
            .axisLabelColor(onBackgroundColor)
            .build()

    val lineChartData =
        LineChartData(
            linePlotData =
                LinePlotData(
                    lines =
                        listOf(
                            Line(
                                dataPoints = points,
                                lineStyle = LineStyle(color = primaryColor, width = 3f),
                                intersectionPoint = IntersectionPoint(color = primaryColor),
                                selectionHighlightPoint = SelectionHighlightPoint(color = primaryColor),
                                shadowUnderLine = ShadowUnderLine(),
                                selectionHighlightPopUp = SelectionHighlightPopUp(),
                            ),
                        ),
                ),
            xAxisData = xAxisData,
            yAxisData = yAxisData,
            backgroundColor = backgroundColor,
        )

    LineChart(
        modifier =
            modifier
                .fillMaxWidth()
                .height(300.dp),
        lineChartData = lineChartData,
    )
}

problem

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions