FreeCharts

Scatter Chart

Horizontally scrollable scatter chart with multi-category color mapping and configurable axes 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 scatter chart built on Swift Charts (PointMark). Supports generic category types with color mapping. Includes configurable Y-axis domain, scrollable date range, and visible day window. Provides a convenience initializer for String categories.

What you get

  • ✓231 lines of source code, ready to paste
  • ✓Source Code
  • ✓Usage
chartscatterdata visualizationSwiftUISwift Charts

Usage

Basic Scatter Chart

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

let sampleData: [SWScatterChart<String>.DataPoint] = [
    .init(date: calendar.date(byAdding: .hour, value: 8, to: today)!, value: 85, category: "Teeth"),
    .init(date: calendar.date(byAdding: .hour, value: 12, to: today)!, value: 52, category: "Food"),
    .init(date: calendar.date(byAdding: .hour, value: 18, to: today)!, value: 78, category: "Food"),
    .init(date: calendar.date(byAdding: .day, value: -1, to: today)!, value: 72, category: "Teeth"),
    .init(date: calendar.date(byAdding: .day, value: -2, to: today)!, value: 90, category: "Teeth"),
    .init(date: calendar.date(byAdding: .day, value: -3, to: today)!, value: 45, category: "Food"),
]

SWScatterChart(
    dataPoints: sampleData,
    colorMapping: ["Teeth": .blue, "Food": .orange],
    title: "Scan Trends"
)

Custom Y Domain

let temperatureData: [SWScatterChart<String>.DataPoint] = [
    .init(date: calendar.date(byAdding: .hour, value: 6, to: today)!, value: 36.2, category: "Morning"),
    .init(date: calendar.date(byAdding: .hour, value: 12, to: today)!, value: 36.8, category: "Noon"),
    .init(date: calendar.date(byAdding: .hour, value: 20, to: today)!, value: 37.1, category: "Evening"),
]

SWScatterChart(
    dataPoints: temperatureData,
    colorMapping: ["Morning": .cyan, "Noon": .yellow, "Evening": .purple],
    yDomain: 35...40,
    visibleDays: 5,
    chartHeight: 200,
    title: "Body Temperature"
)

More in Charts

All 8 skills in Charts