FreeCharts

Bar Chart

Horizontally scrollable bar chart with grouped and stacked modes, value labels, and animated bar growth 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 bar chart built on Swift Charts (BarMark). Supports grouped and stacked display modes, multiple series with color mapping, and optional value labels. Generic over CategoryType for series grouping with a convenience initializer for String categories. Bars animate from 0 to their target values on appear.

What you get

  • ✓350 lines of source code, ready to paste
  • ✓Source Code
  • ✓Usage
chartbardata visualizationSwiftUISwift Charts

Usage

Grouped Bar Chart (Two Series)

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

let salesData: [SWBarChart<String>.DataPoint] = (0..<10).flatMap { dayOffset -> [SWBarChart<String>.DataPoint] in
    let date = calendar.date(byAdding: .day, value: -dayOffset, to: today)!
    return [
        .init(date: date, value: Double.random(in: 50...150), category: "Online"),
        .init(date: date, value: Double.random(in: 30...100), category: "Offline"),
    ]
}

SWBarChart(
    dataPoints: salesData,
    colorMapping: ["Online": .blue, "Offline": .orange],
    title: "Sales by Channel (Grouped)"
)

Stacked Bar Chart

let stackedData: [SWBarChart<String>.DataPoint] = (0..<7).flatMap { dayOffset -> [SWBarChart<String>.DataPoint] in
    let date = calendar.date(byAdding: .day, value: -dayOffset, to: today)!
    return [
        .init(date: date, value: Double.random(in: 30...80), category: "Food"),
        .init(date: date, value: Double.random(in: 20...50), category: "Transport"),
        .init(date: date, value: Double.random(in: 10...40), category: "Entertainment"),
    ]
}

SWBarChart(
    dataPoints: stackedData,
    colorMapping: [
        "Food": .green,
        "Transport": .blue,
        "Entertainment": .purple,
    ],
    stackMode: .stacked,
    showValueLabels: false,
    yDomain: 0...200,
    visibleDays: 7,
    chartHeight: 250,
    title: "Daily Expenses (Stacked)"
)

Single Series Bar Chart

let singleData: [SWBarChart<String>.DataPoint] = (0..<14).map { dayOffset in
    let date = calendar.date(byAdding: .day, value: -dayOffset, to: today)!
    return .init(date: date, value: Double.random(in: 2000...12000), category: "Steps")
}

SWBarChart(
    dataPoints: singleData,
    colorMapping: ["Steps": .mint],
    showValueLabels: true,
    barCornerRadius: 5,
    visibleDays: 7,
    chartHeight: 200,
    title: "Daily Steps"
)

More in Charts

All 8 skills in Charts