The combo chart experiences lag when rendering five line series and five column series on large screen devices.

[phamquangsang]

Example

@Composable
private fun ComposeBasicComboChart(modelProducer: CartesianChartModelProducer, modifier: Modifier) {
  CartesianChartHost(
    rememberCartesianChart(
      rememberColumnCartesianLayer(
        ColumnCartesianLayer.ColumnProvider.series(
          colorList.map { color ->
            rememberLineComponent(fill = fill(color), thickness = 16.dp)
          }
        ),
      ),
      rememberLineCartesianLayer(
        LineCartesianLayer.LineProvider.series(
          colorList.map { color ->
            LineCartesianLayer.Line(
              fill = LineCartesianLayer.LineFill.single(fill(color)),
              dataLabel = TextComponent(
                color = color.toArgb(),
                textSizeSp = 12F,
              ),
              pointProvider = LineCartesianLayer.PointProvider.single(
                LineCartesianLayer.Point(
                  ShapeComponent(
                    fill = fill(Color.White),
                    strokeFill = fill(Color.Black),
                    strokeThicknessDp = 1F,
                    shape = CorneredShape.rounded(32f),
                  ),
                  sizeDp = 8f,
                ),
              ),
            )
          }

        ),
      ),
      startAxis = VerticalAxis.rememberStart(),
      bottomAxis = HorizontalAxis.rememberBottom(),
    ),
    modelProducer,
    modifier.height(400.dp),
    scrollState = rememberVicoScrollState(),
    zoomState = rememberVicoZoomState(),
  )
}

@Composable
internal fun BasicComboChart(uiFramework: UIFramework, modifier: Modifier) {
  val modelProducer = remember { CartesianChartModelProducer() }
  LaunchedEffect(Unit) {
    modelProducer.runTransaction {
      /* Learn more: https://patrykandpatrick.com/eji9zq. */
      columnSeries {
        series(randomSeries())
        series(randomSeries())
        series(randomSeries())
        series(randomSeries())
        series(randomSeries())
      }
      /* Learn more: https://patrykandpatrick.com/vmml6t. */
      lineSeries {
        series(randomSeries())
        series(randomSeries())
        series(randomSeries())
        series(randomSeries())
        series(randomSeries())
      }
    }
  }
  when (uiFramework) {
    UIFramework.Compose -> ComposeBasicComboChart(modelProducer, modifier)
    UIFramework.Views -> ViewBasicComboChart(modelProducer, modifier)
  }
}

private fun randomSeries(size: Int = 1000): List<Int> {
  val list = mutableListOf<Int>()
  for (i in 0 until size) {
    list.add(Random.nextInt(100))
  }
  return list
}

object ChartColors {
  val red = Color(0xFFEB4E3D)
  val orange = Color(0xFFF19A37)
  val yellow = Color(0xFFF7CE46)
  val green = Color(0xFF65C466)
  val mint = Color(0xFF5AC4BD)
  val teal = Color(0xFF5AAEC4)
  val cyan = Color(0xFF59ABE1)
  val blue = Color(0xFF3478F6)
  val indigo = Color(0xFF5856CE)
  val purple = Color(0xFFA357D7)
  val pink = Color(0xFFEB445A)
  val brown = Color(0xFF9D8563)
}
private val colorList = listOf<Color>(
  ChartColors.red,
  ChartColors.yellow,
  ChartColors.purple,
  ChartColors.green,
  ChartColors.blue,
)

https://github.com/user-attachments/assets/c9e1cf82-926b-4fa5-9b1a-7fc67b74ad86
https://github.com/user-attachments/assets/986b7964-6daa-4dc4-b2b8-72e007aef70e

How to reproduce

When rendering a combo chart with 5 lines and 5 columns, zoom and scroll enabled, on a Tablet device.

internal fun BasicComboChart(uiFramework: UIFramework, modifier: Modifier) {
  val modelProducer = remember { CartesianChartModelProducer() }
  LaunchedEffect(Unit) {
    modelProducer.runTransaction {
      /* Learn more: https://patrykandpatrick.com/eji9zq. */
      columnSeries {
        series(randomSeries())
        series(randomSeries())
        series(randomSeries())
        series(randomSeries())
        series(randomSeries())
      }
      /* Learn more: https://patrykandpatrick.com/vmml6t. */
      lineSeries {
        series(randomSeries())
        series(randomSeries())
        series(randomSeries())
        series(randomSeries())
        series(randomSeries())
      }
    }
  }
  when (uiFramework) {
    UIFramework.Compose -> ComposeBasicComboChart(modelProducer, modifier)
    UIFramework.Views -> ViewBasicComboChart(modelProducer, modifier)
  }
}

Each series contains 500 data points. 10 series in total

private fun randomSeries(size: Int = 500): List<Int> {
  val list = mutableListOf<Int>()
  for (i in 0 until size) {
    list.add(Random.nextInt(100))
  }
  return list
}

The chart has customized colors, visible data labels, and customized data points.

@Composable
private fun ComposeBasicComboChart(modelProducer: CartesianChartModelProducer, modifier: Modifier) {
  CartesianChartHost(
    rememberCartesianChart(
      rememberColumnCartesianLayer(
        ColumnCartesianLayer.ColumnProvider.series(
          colorList.map { color ->
            rememberLineComponent(fill = fill(color), thickness = 16.dp)
          }
        ),
      ),
      rememberLineCartesianLayer(
        LineCartesianLayer.LineProvider.series(
          colorList.map { color ->
            LineCartesianLayer.Line(
              fill = LineCartesianLayer.LineFill.single(fill(color)),
              dataLabel = TextComponent(
                color = color.toArgb(),
                textSizeSp = 12F,
              ),
              pointProvider = LineCartesianLayer.PointProvider.single(
                LineCartesianLayer.Point(
                  ShapeComponent(
                    fill = fill(Color.White),
                    strokeFill = fill(Color.Black),
                    strokeThicknessDp = 1F,
                    shape = CorneredShape.rounded(32f),
                  ),
                  sizeDp = 8f,
                ),
              ),
            )
          }

        ),
      ),
      startAxis = VerticalAxis.rememberStart(),
      bottomAxis = HorizontalAxis.rememberBottom(),
    ),
    modelProducer,
    modifier.height(400.dp),
    scrollState = rememberVicoScrollState(),
    zoomState = rememberVicoZoomState(),
  )
}

Observed behavior

The performance is very laggy when scrolling and zooming, even on high-end devices like the Galaxy Tab S9+ (Snapdragon 8 Gen 2). UI performance is significantly worse on tablet devices.

Expected behavior

zooming and scrolling should be smooth.

Module(s)

compose

Platform(s)

Android

Platform version(s)

Android 15

Vico version(s)

2.0.1

Additional information

No response

[phamquangsang]

You can find the sample code here:
https://drive.google.com/file/d/1EeiXLVhjyGcYc3iv9botfT1M_LeBpwly/view?usp=drive_link
Apk sample:
https://drive.google.com/file/d/11DeBIbKqJaPwSMDTL74eqCMFyh-e9V6J/view?usp=sharing

[Gowsky]

Hello, @phamquangsang. Thanks for the report. We'll look into it.

[Gowsky]

Also, please note that you're using some core APIs that aren't intended for direct use with Compose:

• LineCartesianLayer.rememberLine should be used instead of the LineCartesianLayer.Line constructor.
• rememberTextComponent should be used instead of the TextComponent constructor.
• LineCartesianLayer.point should be used instead of the LineCartesianLayer.Point constructor.
• You should use the Dp-based CorneredShape.rounded extension function from compose instead of the member function from core.

See here for more.

[Gowsky]

This will be addressed over the course of several updates. Vico 2.1.0-alpha.5 and Vico 2.1.0-alpha.6 introduced some relevant enhancements. The chart’s performance has noticeably improved, but it’s still suoboptimal, so we’re continuing to look into this.

[phamquangsang]

That sounds great. I looked into this and found that LineCartesianLayer.drawInternal takes up most of the rendering time. I’ve attached a system tracing file below—hope it helps. In the meantime, I’ll give the latest alpha version a try.
Thanks for your great work.

https://drive.google.com/file/d/1tE9fpTXpAUS2RVM24CHsDn1S2mhBDNMW/view?usp=sharing