Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LeonelZalegas opened this issue Jul 24, 2024 · 1 comment
Open

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

LeonelZalegas opened this issue Jul 24, 2024 · 1 comment

Comments

@LeonelZalegas
Copy link

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

@LeonelZalegas LeonelZalegas changed the title Bug in LineChart (grey bars appears out of nowhwere) Bug in LineChart (gray bars appears out of nowhere) Jul 24, 2024
@LeonelZalegas
Copy link
Author

  • at the end the first gray bar was because i needed to add the .backgroundColor() in the Y axis
  • No idea about the 2nd gray Bar, i finished just doing this for solving it:
 Box(
                        modifier =
                            Modifier
                                .fillMaxWidth()
                                .height(300.dp),
                    ) {
                        IntradayInfoChart(
                            infos = state.stockIntradayInfos,
                            modifier =
                                Modifier
                                    .fillMaxWidth()
                                    .height(300.dp),
                        )
                        Box(
                            modifier =
                                Modifier
                                    .height(300.dp)
                                    .width(20.dp)
                                    .background(DarkBlue)
                                    .align(Alignment.CenterEnd)
                                    .offset(x = (-20).dp)
                                    .zIndex(1f),
                        )
                    }
  • there is also some kind of bug in the 1st item shown, the value in the X axis is cut and also in the point itself

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant