FreeCharts

Line Chart

Horizontally scrollable multi-series line chart with reference lines, configurable interpolation, and point markers 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 line chart built on Swift Charts (LineMark). Supports multiple series with color mapping, optional RuleMark reference lines, configurable interpolation methods, and point markers. Generic over CategoryType for series grouping with a convenience initializer for String categories. Includes an appear animation where values grow from 0 to their targets.

What you get

  • ✓346 lines of source code, ready to paste
  • ✓Source Code
  • ✓Usage
chartlinedata visualizationSwiftUISwift Charts

Usage

Basic Multi-Series Line Chart

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

let salesData: [SWLineChart<String>.DataPoint] = (0..<14).flatMap { dayOffset -> [SWLineChart<String>.DataPoint] in
    let date = calendar.date(byAdding: .day, value: -dayOffset, to: today)!
    return [
        .init(date: date, value: Double.random(in: 40...90), category: "Revenue"),
        .init(date: date, value: Double.random(in: 20...60), category: "Cost"),
    ]
}

SWLineChart(
    dataPoints: salesData,
    colorMapping: ["Revenue": .blue, "Cost": .red],
    title: "Revenue vs Cost"
)

With Reference Lines and Custom Interpolation

let tempData: [SWLineChart<String>.DataPoint] = (0..<10).map { dayOffset in
    let date = calendar.date(byAdding: .day, value: -dayOffset, to: today)!
    return .init(date: date, value: Double.random(in: 35.5...38.5), category: "Temperature")
}

SWLineChart(
    dataPoints: tempData,
    colorMapping: ["Temperature": .orange],
    referenceLines: [
        .init(value: 37.0, label: "Normal", color: .green),
        .init(value: 38.0, label: "Fever", color: .red),
    ],
    interpolationMethod: .catmullRom,
    showPointMarkers: true,
    yDomain: 35...40,
    visibleDays: 10,
    chartHeight: 220,
    title: "Body Temperature"
)

Single Series with Stepped Interpolation

let stepData: [SWLineChart<String>.DataPoint] = (0..<7).map { dayOffset in
    let date = calendar.date(byAdding: .day, value: -dayOffset, to: today)!
    return .init(date: date, value: Double(Int.random(in: 1...5)) * 1000, category: "Steps")
}

SWLineChart(
    dataPoints: stepData,
    colorMapping: ["Steps": .green],
    interpolationMethod: .stepCenter,
    visibleDays: 7,
    chartHeight: 180,
    title: "Daily Steps (Stepped)"
)

More in Charts

All 8 skills in Charts