Stacked Area Chart

StackedAreaChart renders multiple series as cumulative, stacked areas over a shared category axis.

The example below is minimal and runs as written. The GIF above uses a longer generated series per plan; its full source is in StackedAreaExample.kt.

@Composable
fun ShowStackedArea() {
    val data = listOf(
        "Free Plan" to listOf(240.0, 380.0, 520.0, 610.0, 740.0, 880.0),
        "Standard Plan" to listOf(100.0, 210.0, 330.0, 450.0, 580.0, 700.0),
        "Premium Plan" to listOf(60.0, 140.0, 260.0, 380.0, 520.0, 660.0),
    ).toChartData(
        categories = listOf("Jan", "Feb", "Mar", "Apr", "May", "Jun"),
    )

    StackedAreaChart(data = data, title = "Monthly Active Subscribers by Plan")
}

Gradients

Pass a shared ChartGradient to StackedAreaChartDefaults.fill(gradient = ...) to use it for every area layer. ChartGradients.fade() follows each layer's series color. See Gradients for details.

We currently recommend only fade gradients for stacked area charts. Fades preserve each series' color. Gradients through multiple colors within a layer can make series hard to distinguish.

StackedAreaChartDefaults.fill(
    gradient = ChartGradients.fade(endAlpha = 0.35f),
)