FreeCharts

Area Chart

Horizontally scrollable area chart with standard and stacked modes, optional line overlay, and configurable gradient opacity built on Swift Charts

Free
Free with a ShipSwift account.

Copies a short instruction with your private download link. Paste it into your agent: it downloads the whole skill (the source code, the setup steps and the mistakes we already made for you) and builds the screen.

Works with

+70

What it does

A horizontally scrollable area chart built on Swift Charts (AreaMark). Supports multiple series with color mapping, configurable area opacity, optional line overlay, and configurable interpolation. Generic over CategoryType for series grouping with a convenience initializer for String categories. Values animate from 0 to their targets on appear.

What you get

  • ✓345 lines of source code, ready to paste
  • ✓Source Code
  • ✓Usage
chartareadata visualizationSwiftUISwift Charts

Usage

Standard Multi-Series Area Chart (Overlapping)

let calendar = Calendar.current
let today = calendar.startOfDay(for: Date())

let trafficData: [SWAreaChart<String>.DataPoint] = (0..<14).flatMap { dayOffset -> [SWAreaChart<String>.DataPoint] in
    let date = calendar.date(byAdding: .day, value: -dayOffset, to: today)!
    return [
        .init(date: date, value: Double.random(in: 100...300), category: "Organic"),
        .init(date: date, value: Double.random(in: 50...200), category: "Paid"),
    ]
}

SWAreaChart(
    dataPoints: trafficData,
    colorMapping: ["Organic": .green, "Paid": .blue],
    gradientOpacity: 0.25,
    title: "Website Traffic"
)

Stacked Area Chart

let revenueData: [SWAreaChart<String>.DataPoint] = (0..<10).flatMap { dayOffset -> [SWAreaChart<String>.DataPoint] in
    let date = calendar.date(byAdding: .day, value: -dayOffset, to: today)!
    return [
        .init(date: date, value: Double.random(in: 40...120), category: "Product A"),
        .init(date: date, value: Double.random(in: 30...80), category: "Product B"),
        .init(date: date, value: Double.random(in: 20...60), category: "Product C"),
    ]
}

SWAreaChart(
    dataPoints: revenueData,
    colorMapping: [
        "Product A": .purple,
        "Product B": .orange,
        "Product C": .cyan,
    ],
    stackMode: .stacked,
    interpolationMethod: .catmullRom,
    gradientOpacity: 0.4,
    yDomain: 0...300,
    visibleDays: 10,
    chartHeight: 240,
    title: "Revenue by Product (Stacked)"
)

Single Series Area Chart (No Line Overlay)

let memoryData: [SWAreaChart<String>.DataPoint] = (0..<7).map { dayOffset in
    let date = calendar.date(byAdding: .day, value: -dayOffset, to: today)!
    return .init(date: date, value: Double.random(in: 1.5...4.0), category: "Memory")
}

SWAreaChart(
    dataPoints: memoryData,
    colorMapping: ["Memory": .red],
    showLineOverlay: false,
    interpolationMethod: .monotone,
    gradientOpacity: 0.3,
    visibleDays: 7,
    chartHeight: 180,
    title: "Memory Usage (GB)"
)

More in Charts

All 8 skills in Charts