Stacked Bar Chart

StackedBarChart renders multiple series as stacked segments within each category's bar.

Stacked Bar Demo

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

@Composable
fun ShowStackedBar() {
    val data = listOf(
        "Online" to listOf(280.0, 520.0, 760.0, 1080.0),
        "Retail" to listOf(480.0, 760.0, 1050.0, 1400.0),
        "Wholesale" to listOf(360.0, 540.0, 620.0, 720.0),
    ).toChartData(
        categories = listOf("Q1", "Q2", "Q3", "Q4"),
    )

    StackedBarChart(data = data, title = "Quarterly Revenue by Channel")
}

Formatting

StackedBarChart(
    data = data,
    title = "Quarterly Revenue by Channel",
    selectedValueFormatter = ChartValueFormatters.prefix("$"),
    axisValueFormatter = ChartValueFormatter { value ->
        "$" + StackedBarChartDefaults.axisValueFormatter.format(value)
    },
)

selectedValueFormatter formats the selected values, and axisValueFormatter formats the Y-axis labels. StackedAreaChart takes the same two formatters.