One Line chart with two data sets

[wojtekkula3]

Question

I would like to create a one chart that displays two types of data. The first line should represent voltage over time and the second one percentage over time.

• On the axis X I have minutes - 1, 2, 3 etc.
• On the left Y axis I need the voltage range with the min 0, max 200, and 5 values - 0, 50, 100, 150, 200. So the values on the chart may be (x,y) - (0, 40), (1, 60) (2, 80),(3, 150) .
• On the right Y axis I want to show percentage with min 0, max 100, and 5 values - 0, 25, 50, 75, 100. (As you see I want common horizontal lines). So the values on the chart may be (x,y) - (0, 10), (1, 30), (2, 50), (3, 60).

For me it is possible to design it with Compose, and two Charts in the Box - one positioned on the other. But this is very risky and I want to combine it into one one Chart. Current preview with two charts in Box:

Legend: RED - Voltage chart, BLUE - percentage chart

Box {
        ProvideChartStyle(chartStyle = chartStyle) {
            Chart(
                chart = lineChart(
                    axisValuesOverrider = AxisValuesOverrider.fixed(minY = 0f, maxY = 200f),
                ),
                model = chartEntryModel,
                startAxis = rememberStartAxis(
                    itemPlacer = AxisItemPlacer.Vertical.default(maxItemCount = 5),
                    sizeConstraint = Axis.SizeConstraint.Exact(50f)
                ),
                bottomAxis = rememberBottomAxis(
                    guideline = null
                ),
                endAxis = rememberEndAxis(
                    itemPlacer = AxisItemPlacer.Vertical.default(maxItemCount = 5),
                    valueFormatter = { _, _ -> "" },
                    sizeConstraint = Axis.SizeConstraint.Exact(50f)
                )
            )
        }

        ProvideChartStyle(chartStyle = chartStyle2) {
            Chart(
                chart = lineChart(
                    axisValuesOverrider = AxisValuesOverrider.fixed(minY = 0f, maxY = 100f),
                ),
                model = chartEntryModel2,
                startAxis = rememberStartAxis(
                    itemPlacer = AxisItemPlacer.Vertical.default(maxItemCount = 5),
                    valueFormatter = { _, _ -> "" },
                    sizeConstraint = Axis.SizeConstraint.Exact(50f)
                ),
                endAxis = rememberEndAxis(
                    itemPlacer = AxisItemPlacer.Vertical.default(maxItemCount = 5),
                    sizeConstraint = Axis.SizeConstraint.Exact(50f)
                ),
                bottomAxis = rememberBottomAxis(
                    guideline = null
                )
            )
        }
    }

As what I see from your examples image it should be possible to receive something like:

But I cannot achieve it because I cannot put into one chart 2 AxisValuesOverriders.

Can you give me a hint how to develop something like in your example? I see there are two different data types. I want to use stable 1.15.0 version. If this is not possible with the version and possible with 2.0.0-beta3 I'm also happy to receive solution.

Vico version(s)

1.15.0

UI framework(s)

Jetpack Compose

[Gowsky]

Hello, @wojtekkula3. This is possible in both Vico 1.15.0 and Vico 2.0.0-beta.3. To implement it, instead of using a single LineChart/LineCartesianLayer with two series, you should use two (each with one series) and link them to separate y-axes. Below is an example for Vico 1.15.0. It uses ComposedChartEntryModelProducer, but you can also create the model manually if needed.

val modelProducer = ComposedChartEntryModelProducer.build()

modelProducer.runTransaction {
    add(entriesOf(40, 60, 80, 150))
    add(entriesOf(10, 30, 50, 60))
}

val lineChart1 =
    lineChart(
        axisValuesOverrider = AxisValuesOverrider.fixed(maxY = 200f),
        targetVerticalAxisPosition = AxisPosition.Vertical.Start,
    )
val lineChart2 =
    lineChart(
        axisValuesOverrider = AxisValuesOverrider.fixed(maxY = 100f),
        targetVerticalAxisPosition = AxisPosition.Vertical.End,
    )
val itemPlacer = remember { AxisItemPlacer.Vertical.default(maxItemCount = 5) }
Chart(
    chart = remember(lineChart1, lineChart2) { lineChart1 + lineChart2 },
    chartModelProducer = modelProducer,
    startAxis = rememberStartAxis(itemPlacer = itemPlacer),
    endAxis = rememberEndAxis(guideline = null, itemPlacer = itemPlacer),
    bottomAxis = rememberBottomAxis(),
)

[wojtekkula3]

Super @Gowsky! That's what I needed, just also found the samples. And I implemented it with 2.0.0-beta3.
I can achieve almost what I want but I need one more thing and I'm wondering if it is possible to implement it with the HorizontalAxis.ItemPlacer. I need to have two values under x axis. One on the start and other on the end. The first one must be aligned to the start of axis, and the second to the end. Like below (in example there is 25 values on the chart):

[wojtekkula3]

Ok. What I'm able to implement is:

With below code:

@Composable
private fun rememberBottomAxis(axisLabelsTypeface: Typeface) = HorizontalAxis.rememberBottom(
    label = rememberAxisLabelComponent(
        color = AXIS_LABELS_COLOR.color,
        padding = dimensions(top = 8.dp),
        typeface = axisLabelsTypeface,
        textSize = 12.sp,
    ),
    valueFormatter = { measuringContext, value, _ ->
        if (value == 0.0) "0 min" else if (value == measuringContext.ranges.xLength) "47 min" else " "
    },
    itemPlacer = HorizontalAxis.ItemPlacer.aligned(addExtremeLabelPadding = true, spacing = 47),
    line = rememberAxisLineComponent(
        shape = Shape.Rectangle,
        thickness = 1.dp,
        fill = fill(HORIZONTAL_GUIDELINE_COLOR.color),
    ),
    guideline = null,
    tick = null
)

But I want the chart to start with the start of the X line like with the parameter addExtremeLabelPadding = false.