How to show guidelines only for labels on Horizontal axis

[anshu7vyas]

Question

Hey there,

Thanks for making this amazing library, I have been utilizing it in a recent project. 🙌 Here's the situation, I want to enable guidelines for bottom axis for only the label positions on the axis . However, if I enable guidelines for bottom axis, the guidelines show up for every single point on the graph instead (Screenshot 2). The documentation does mention that having an itemPlacer determines for what x values the HorizontalAxis to display labels, ticks, and guidelines, it works as expected for Vertical axis:

without Horizontal axis guidelines	with Horizontal axis guidelines

Here's what I implemented for startAxis and bottomAxis mostly identical,

@Composable
private fun getStartAxis(chartData: ChartData) =
    rememberStartAxis(
        label = rememberTextComponent(
            color = Colors.text_02,
            padding = Dimensions(8.dp),
        ),
        valueFormatter = getStartAxisValueFormatter(chartData),
        itemPlacer = remember { AxisItemPlacer.Vertical.step({ _ -> Y_AXIS_PRICE_INCREMENT_STEP }) },
        axis = rememberAxisLineComponent(color = Colors.stroke_01),
        guideline = rememberAxisGuidelineComponent(
            shape = Shape.Rectangle,
            color = Colors.stroke_01,
        ),
        tick = null,
    )

@Composable
private fun getBottomAxis(chartData: ChartData) =
    rememberBottomAxis(
        label = rememberTextComponent(
            color = Ccolors.text_02,
            padding = Dimensions(8.dp),
        ),
        valueFormatter = getBottomAxisValueFormatter(chartData),
        itemPlacer = remember {
            AxisItemPlacer.Horizontal.default(
                spacing = BOTTOM_AXIS_LABEL_SPACING,
                addExtremeLabelPadding = true,
                offset = BOTTOM_AXIS_LABEL_OFFSET,
            )
        },
        axis = rememberAxisLineComponent(color = Colors.stroke_01),
        guideline = rememberAxisGuidelineComponent(
            shape = Shape.Rectangle,
            color = Colors.stroke_01,
        ),
        tick = null,
    )

What I might be doing wrong here? Any guidance is appreciated!

Vico version(s)

2.0.0-alpha19

UI framework(s)

Jetpack Compose

[npced16]

In my code, I solved it using getXstep.

@Composable
fun ECGChart(
    modifier: Modifier,
    dataList: List<Float>,
) {
    val cartesianChartModel =
        CartesianChartModel(LineCartesianLayerModel.build { series(dataList) })
    Column(
        modifier = modifier,
    ) {
        CartesianChartHost(
            chart = rememberCartesianChart(
                rememberLineCartesianLayer(
                    lines = listOf(
                        rememberLineSpec(
                            shader = DynamicShader.color(Color(0xFF65A7BE)),
                            thickness = 1.dp,
                            backgroundShader = null,
                        ),
                    ),
                ),
                startAxis = rememberStartAxis(),
                bottomAxis = rememberBottomAxis(
                   guideline = null,
                    itemPlacer =
                    remember {
                        AxisItemPlacer.Horizontal.default(
                            addExtremeLabelPadding = true,
                        )
                    },
                ),
            ),
            getXStep = { 100f },
            model = cartesianChartModel,
            zoomState = rememberVicoZoomState(zoomEnabled = false),
            scrollState = rememberVicoScrollState(
                scrollEnabled = true,
                initialScroll = Scroll.Absolute.End
            ),
            marker = rememberDefaultCartesianMarker(
                label = rememberTextComponent(
                    textSize = 10.sp,
                    typeface = NotosanskrTypography.bodySmall.toGraphicsTypeFace(),
                ),
            ),
            horizontalLayout = HorizontalLayout.FullWidth(),
        )
    }
}

[anshu7vyas]

Thanks for the response @npced16, I tried getXStep, that did show the horizontal guidelines but it has an unintended side effect of making the bottom axis labels disappear and also adding padding on start and end of the graph

[patrickmichalik]

Hello, @anshu7vyas! Thanks for the kind words. Applying HorizontalLayout.FullWidth should do the trick:

CartesianChartHost(horizontalLayout = HorizontalLayout.fullWidth(), /* ... */)

HorizontalLayout.FullWidth is used in @npced16’s code snippet, and this is the key point. Both getXStep and AxisItemPlacer.Horizontal.default’s spacing and offset parameters affect what labels are added, but it’s HorizontalLayout that defines (among other things) how ticks and guidelines are positioned relative to the labels. This is described here.

If you have any questions, let me know. Thanks for your input, @npced16!

[anshu7vyas]

Thank you for your response @patrickmichalik, this did the trick! Much appreciated 🙌

[patrickmichalik]

You’re welcome!