Area represent multiple data element as a single area shape. Area marks are often used to show change over time, using either a single area or stacked areas.

Simple Stacked Area Chart

Adding a color field to area chart creates stacked area chart by default. For example, here we split the area chart by country by setting stack to "stacked".

use charton::prelude::*;
use std::error::Error;

fn main() -> Result<(), Box<dyn Error>> {
    // Create sample data similar to the Iowa electricity dataset
    let df = load_dataset("unemployment")?;
    println!("{}", df);
    // Create an area chart
    let area_chart = Chart::build(&df)?.mark_area()?.encode((
        x("Year"),
        y("Unemployment rate (%)").with_stack("stacked"),
        color("Country"),
    ))?;

    // Create a layered chart for the area
    area_chart.save("docs/src/images/simple_stacked_area.svg")?;

    Ok(())
}

Normalized Stacked Area Chart

You can also create a normalized stacked area chart by setting stack to "normalize" in the encoding channel. Here we can easily see the percentage of unemployment across countries.

use charton::prelude::*;
use std::error::Error;

fn main() -> Result<(), Box<dyn Error>> {
    let df = load_dataset("unemployment")?;
    println!("{}", df);
    let area_chart = Chart::build(&df)?.mark_area()?.encode((
        x("Year"),
        y("Unemployment rate (%)").with_stack("normalize"),
        color("Country"),
    ))?;

    area_chart.save("docs/src/images/normalized_stacked_area.svg")?;

    Ok(())
}

Steamgraph

We can also shift the stacked area chart’s baseline to center and produces a streamgraph by setting stack to "center" in the encoding channel.

use charton::prelude::*;
use std::error::Error;

fn main() -> Result<(), Box<dyn Error>> {
    let df = load_dataset("unemployment")?;
    println!("{}", df);
    let area_chart = Chart::build(&df)?.mark_area()?.encode((
        x("Year"),
        y("Unemployment rate (%)").with_stack("center"),
        color("Country"),
    ))?;

    area_chart.save("docs/src/images/steamgraph.svg")?;

    Ok(())
}