Area Chart

An area chart of rows that are given once: for each of the values read from them a line, with the room between it and nought filled.

import com.pantrixui.components.chart.area.PantrixAreaChart

• Fill. fill says what the room under the line is filled with: Gradient is the series' colour fading from the line towards zero, Solid an even tint of the colour.
• Zero. An area chart's value axis starts at zero: an area's height is read as an amount, and an area cut off above zero shows less than there is. The axis can say otherwise with startFromZero = false. Where values go below zero the area fills downwards from the zero line.
• Areas over one another. Each area is drawn over the one before it, and all from zero: a later series covers an earlier one where it is larger. The fading fill shows the one underneath; give the larger series first.
• Stacked areas. With stacked each area stands on the one before it, and the topmost line is the total: the parts of a whole are shown so. The tooltip writes each series' own value, and then the total. With stacking = ChartStacking.Percent each place's total counts as a hundred percent and the areas show the shares.
• Line. curve, missing, and a series' dash and marker are as in the line chart.
• Automation. The chart is tagged as the PantrixChart it is: Chart_<tagKey>.

Examples

A single amount

A single amount over the months: the line goes through smoothly and the room under it is filled, its colour fading towards zero. The value axis starts at zero by itself; its values are written short (format).

A chart of one series has no legend: what the line is belongs to the words around the chart.

val strings = PantrixTheme.strings
PantrixAreaChart(
    data = STORAGE,
    x = { it.month },
    values = listOf(ChartValue("used", "Space used") { it.used }),
    curve = ChartCurve.Smooth,
    yAxis = ChartAxis(format = { "${strings.decimal(it)} GB" }),
    description = "Storage space used by month",
    tagKey = "plain"
)

private data class Storage(
    val month: String,
    val used: Int,
    val backups: Int
)

private val STORAGE = listOf(
    Storage("Jan", used = 120, backups = 40),
    Storage("Feb", used = 138, backups = 46),
    Storage("Mar", used = 151, backups = 52),
    Storage("Apr", used = 149, backups = 61),
    Storage("May", used = 176, backups = 64),
    Storage("Jun", used = 203, backups = 72),
    Storage("Jul", used = 221, backups = 85),
    Storage("Aug", used = 214, backups = 91),
    Storage("Sep", used = 252, backups = 96),
    Storage("Oct", used = 281, backups = 110),
    Storage("Nov", used = 305, backups = 124),
    Storage("Dec", used = 342, backups = 131)
)

Two amounts, two fills

Two amounts, the larger given first. With Gradient each area fades from its line towards zero, and the area underneath shows through the one above; with Solid the fill is an even tint. Turn the switch and compare the two.

var solid by remember { mutableStateOf(false) }
PantrixSwitchButton(
    checked = solid,
    onCheckedChange = { solid = it },
    label = "Solid fill",
    tagKey = "area_solid"
)
PantrixAreaChart(
    data = STORAGE,
    x = { it.month },
    values = listOf(
        ChartValue("used", "Space used") { it.used },
        ChartValue("backups", "Backups") { it.backups }
    ),
    curve = ChartCurve.Smooth,
    fill = if (solid) ChartFill.Solid else ChartFill.Gradient,
    description = "Space used and backups by month",
    tagKey = "fills"
)

private data class Storage(
    val month: String,
    val used: Int,
    val backups: Int
)

private val STORAGE = listOf(
    Storage("Jan", used = 120, backups = 40),
    Storage("Feb", used = 138, backups = 46),
    Storage("Mar", used = 151, backups = 52),
    Storage("Apr", used = 149, backups = 61),
    Storage("May", used = 176, backups = 64),
    Storage("Jun", used = 203, backups = 72),
    Storage("Jul", used = 221, backups = 85),
    Storage("Aug", used = 214, backups = 91),
    Storage("Sep", used = 252, backups = 96),
    Storage("Oct", used = 281, backups = 110),
    Storage("Nov", used = 305, backups = 124),
    Storage("Dec", used = 342, backups = 131)
)

Values that go below zero

Values on both sides of zero: a month's profit or loss. An area always fills towards zero: downwards in profit, upwards in loss. A line is drawn at zero, and the fading fill is strongest at the farthest point on either side of zero.

val strings = PantrixTheme.strings
PantrixAreaChart(
    data = PROFIT,
    x = { it.first },
    values = listOf(ChartValue("profit", "Profit") { it.second }),
    yAxis = ChartAxis(format = { strings.compact(it) }),
    description = "Profit and loss by month",
    tagKey = "below_zero"
)

private val PROFIT = listOf(
    "Jan" to 84_000,
    "Feb" to 52_000,
    "Mar" to 21_000,
    "Apr" to -18_000,
    "May" to -46_000,
    "Jun" to -31_000,
    "Jul" to 9_000,
    "Aug" to 38_000,
    "Sep" to 67_000,
    "Oct" to 95_000,
    "Nov" to 112_000,
    "Dec" to 140_000
)

A stepped area

A value that holds until it changes: a warehouse's stock. StepAfter carries each value level until the next, and the fill fills the room under the steps.

PantrixAreaChart(
    data = STOCK,
    x = { it.first },
    values = listOf(ChartValue("stock", "Stock") { it.second }),
    curve = ChartCurve.StepAfter,
    fill = ChartFill.Solid,
    description = "Stock in the warehouse by week",
    tagKey = "stepped"
)

private val STOCK = listOf(
    "Week 1" to 480,
    "Week 2" to 480,
    "Week 3" to 310,
    "Week 4" to 310,
    "Week 5" to 640,
    "Week 6" to 520,
    "Week 7" to 520,
    "Week 8" to 270
)

Stacked areas

The parts of a whole: visits from three sources, stacked (stacked). Each area starts at the line of the one under it, and the topmost line is all the visits. The fill is a flat tint: so it reads where each area of the stack ends. The tooltip writes the month's total after the sources.

Turn the switch: each month counts as a hundred percent (stacking = ChartStacking.Percent). The areas are now the sources' shares and the axis writes percentages; the tooltip adds each value's share beside it.

Press a name in the legend: the source goes, and the ones over it come down into its place.

var shares by remember { mutableStateOf(false) }
PantrixSwitchButton(
    checked = shares,
    onCheckedChange = { shares = it },
    label = "As shares",
    tagKey = "area_shares"
)
PantrixAreaChart(
    data = SOURCES,
    x = { it.month },
    values = listOf(
        ChartValue("search", "Search") { it.search },
        ChartValue("direct", "Direct") { it.direct },
        ChartValue("social", "Social") { it.social }
    ),
    fill = ChartFill.Solid,
    stacked = true,
    stacking = if (shares) ChartStacking.Percent else ChartStacking.Normal,
    description = "Visits from three sources by month, stacked",
    tagKey = "stacked"
)

private data class Sources(
    val month: String,
    val search: Int,
    val direct: Int,
    val social: Int
)

private val SOURCES = listOf(
    Sources("Jan", search = 420, direct = 240, social = 130),
    Sources("Feb", search = 480, direct = 260, social = 120),
    Sources("Mar", search = 455, direct = 300, social = 165),
    Sources("Apr", search = 530, direct = 280, social = 190),
    Sources("May", search = 510, direct = 330, social = 240),
    Sources("Jun", search = 560, direct = 310, social = 285)
)

API

data

An area chart of rows that are given once: for each of the values read from them a line, with the room between it and nought filled.

ChartStyle

A chart's geometry: how tall it is where nothing says, how thick its lines and how large its marks are, and the room between its parts; and whether its fills have textures besides their colours.

ChartColors

What a chart is painted with, for a chart that does not take the theme's colours: a colour that is set is used, and one that is left out stays the theme's.