How to add custom label list to x axis and y axis which is not similar to plot entryModel data

[sachin-medallia]

Question

Hello team,
-I have created chart using Chart where i am passing point data as val model1 = entryModelData(listOf(FloatEntry)) & model1 = entryModelData(listOf(FloatEntry)) which draw lines aswell ,but want to customize the x axis and y axis labels which are different that plot x axis and y axis values
-I tried to add it in entryModelData but it plots point on graph, which i dont want to

• So i want to show x axis and y axis labels which is different list of Int values
  -I tried values formatter in rememberBottomAxis and rememberStartAxis but it does not shows labels
  -i have attached IOS chart screenshot for reference where you can see plot x & y cordinates are diff but we are showing diff x & y label (kind of range)
  -Is there any known way to do this

Module(s)

compose

Platform(s)

Android

Platform version(s)

No response

Vico version(s)

1.15.0

[sachin-medallia]

Any update on this ?

[Gowsky]

Hello, @sachin-medallia. You can provide a custom list of labels for x and y axes by providing a custom implementation of AxisItemPlacer.Horizontal to rememberBottomAxis (or rememberTopAxis), and AxisItemPlacer.Vertical to rememberStartAxis (or rememberEndAxis). In both cases, you have to implement getLabelValues function to provide the values you'd like to be rendered. You can delegate the implementation of other functions to AxisItemPlacer.Horizontal.default, and AxisItemPlacer.Vertical.default for x and y axes respectively. Additionally, to omit ticks and guidelines for x axis values without a label, you need to provide HorizontalLayout.FullWidth with some scalable padding for horizontalLayout parameter of Chart function.

Here's an example

Chart(
    startAxis = rememberStartAxis(
        itemPlacer = object : AxisItemPlacer.Vertical by AxisItemPlacer.Vertical.default() {
            override fun getLabelValues(
                context: ChartDrawContext,
                axisHeight: Float,
                maxLabelHeight: Float,
                position: AxisPosition.Vertical,
            ): List<Float> = TODO("Provide custom label values here.")
        }
    ),
    bottomAxis = rememberBottomAxis(
        itemPlacer = object : AxisItemPlacer.Horizontal by AxisItemPlacer.Horizontal.default() {
            override fun getLabelValues(
                context: ChartDrawContext,
                visibleXRange: ClosedFloatingPointRange<Float>,
                fullXRange: ClosedFloatingPointRange<Float>,
            ): List<Float> = TODO("Provide custom label values here.")
        },
    ),
    horizontalLayout = HorizontalLayout.fullWidth(
        scalableStartPadding = 16.dp, // Customize the start padding.
        scalableEndPadding = 16.dp, // Customize the end padding.
    ),
    /** Other Chart arguments. */
)