Area Plots

Plotting lines with shaded areas

Area plots are like line plots but with a shaded area between the line being plotted and a second reference line, referred to as the Baseline. The Baseline can be either a horizontal line (constant y-axis value) or an arbitrary line, like another line on the same XYGraph.

There are two ways to create an area plot:

  • Using AreaPlot with an areaBaseline, to plot 1 or more separate lines with filled areas
  • Using StackedAreaPlot to plot multiple lines that stack on top of each other, with filled areas between them

Plotting individual areas

The below example demonstrates plotting two separate area plots where the baseline is set to be the x-axis (horizontal line at which y=0). The lines are each plots of a normal distribution with different means and standard deviations.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

        AreaPlot(
            data = distribution1,
            lineStyle = LineStyle(brush = SolidColor(Color(0xFF00498F)), strokeWidth = 2.dp),
            areaStyle = AreaStyle(
                brush = SolidColor(Color(0xFF00498F)),
                alpha = 0.5f,
            ),
            areaBaseline = AreaBaseline.ConstantLine(0f)
        )
        AreaPlot(
            data = distribution2,
            lineStyle = LineStyle(brush = SolidColor(Color(0xFF37A78F)), strokeWidth = 2.dp),
            areaStyle = AreaStyle(
                brush = SolidColor(Color(0xFF37A78F)),
                alpha = 0.5f,
            ),
            areaBaseline = AreaBaseline.ConstantLine(0f)
        )
/examples/src/jvmMain/kotlin/io/github/koalaplot/example/Area1.kt

Areas

Areas can also be plotted between two arbitrary lines. The below example plots the lines \(y = 10 \times 1.04^x\) and \(y= 10 \times 1.06^x\) with a shaded area between them.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

    val data1 = buildList {
        for (i in 1..10) {
            add(DefaultPoint(i.toFloat(), 10f * (1.04).pow(i).toFloat()))
        }
    }
    val data2 = buildList {
        for (i in 1..10) {
            add(DefaultPoint(i.toFloat(), 10f * (1.06).pow(i).toFloat()))
        }
    }

    XYGraph(
        rememberFloatLinearAxisModel(0f..12f),
        rememberFloatLinearAxisModel(0f..20f),
        xAxisTitle = "",
        yAxisTitle = "",
        xAxisLabels = { it.toString(1) },
        yAxisLabels = { it.toString(1) }
    ) {
        LinePlot(
            data = data1,
            lineStyle = LineStyle(brush = SolidColor(Color(0xFF00498F)), strokeWidth = 2.dp),
        )
        AreaPlot(
            data = data2,
            lineStyle = LineStyle(brush = SolidColor(Color(0xFF37A78F)), strokeWidth = 2.dp),
            areaStyle = AreaStyle(
                brush = SolidColor(Color(0xFF37A78F)),
                alpha = 0.5f,
            ),
            areaBaseline = AreaBaseline.ArbitraryLine(data1)
        )
    }
/examples/src/jvmMain/kotlin/io/github/koalaplot/example/Area2.kt

Areas

Plotting stacked areas

A stack of area plots can be created by using multiple AreaPlot Composables within an XYGraph with appropriate choice of baselines. While this provides the most flexibility, it may not be the most convenient approach. For this reason Koala Plot provides StackedAreaPlot for the common situation where the first baseline is a horizontal line, typically the x-axis.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

    fun makeRandomLine(): List<Float> = buildList {
        var last = 0f
        for (i in 1..10) {
            last += random.nextFloat()
            add(last)
        }
    }

    val randomLines = List(4) { makeRandomLine() }
    val stackData = StackedAreaPlotDataAdapter(randomLines[0].indices.toList().map { (it + 1).toFloat() }, randomLines)
    val styles = List(4) {
        StackedAreaStyle(
            LineStyle(SolidColor(Color.Black), strokeWidth = 2.dp),
            AreaStyle(SolidColor(Color.Blue.copy(alpha = 0.20f * (it + 1))))
        )
    }

    XYGraph(
        rememberFloatLinearAxisModel(0f..12f),
        rememberFloatLinearAxisModel(0f..25f),
        xAxisTitle = "",
        yAxisTitle = "",
        xAxisLabels = { it.toString(1) },
        yAxisLabels = { it.toString(1) }
    ) {
        StackedAreaPlot(
            stackData,
            styles,
            AreaBaseline.ConstantLine(0f)
        )
    }
/examples/src/jvmMain/kotlin/io/github/koalaplot/example/StackedArea1.kt

Stacked Areas

This example uses a List<Float> for the x-axis coordinates and a List<List<Float>> for the y-axis coordinates, created on line 9. It then uses StackedAreaPlotDataAdapter, which implements List<StackedAreaPlotEntry<Float, Float>>, to present the source data in the form expected by StackedAreaPlot. This is convenient if your data is already in the form of a list for the x-axis data points and a list of lists for the y-axis data points. If not, it will be necessary to directly implement the data as List<StackedAreaPlotEntry<X, Y>> or provide a custom adapter for it.


Last modified November 24, 2023: Add docs for area plots (ec00332)