╔═══════════════════════════════════════════════════════════════════════════════════════════════════╗ ║ ║ ║ ███████╗██╗ ██╗██╗███████╗████████╗██╗ ██╗██╗ ██████╗ █████╗ ████████╗ █████╗ ║ ║ ██╔════╝██║ ██║██║██╔════╝╚══██╔══╝██║ ██║██║ ██╔══██╗██╔══██╗╚══██╔══╝██╔══██╗ ║ ║ ███████╗██║ █╗ ██║██║█████╗ ██║ ██║ ██║██║ ██║ ██║███████║ ██║ ███████║ ║ ║ ╚════██║██║███╗██║██║██╔══╝ ██║ ██║ ██║██║ ██║ ██║██╔══██║ ██║ ██╔══██║ ║ ║ ███████║╚███╔███╔╝██║██║ ██║ ╚██████╔╝██║ ██████╔╝██║ ██║ ██║ ██║ ██║ ║ ║ ╚══════╝ ╚══╝╚══╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝ ║ ║ ║ ║ ██╗ ██╗██╗███████╗██╗ ██╗ █████╗ ██╗ ██╗███████╗ █████╗ ████████╗██╗ ██████╗ ███╗ ██╗ ║ ║ ██║ ██║██║██╔════╝██║ ██║██╔══██╗██║ ██║╚══███╔╝██╔══██╗╚══██╔══╝██║██╔═══██╗████╗ ██║ ║ ║ ██║ ██║██║███████╗██║ ██║███████║██║ ██║ ███╔╝ ███████║ ██║ ██║██║ ██║██╔██╗ ██║ ║ ║ ╚██╗ ██╔╝██║╚════██║██║ ██║██╔══██║██║ ██║ ███╔╝ ██╔══██║ ██║ ██║██║ ██║██║╚██╗██║ ║ ║ ╚████╔╝ ██║███████║╚██████╔╝██║ ██║███████╗██║███████╗██║ ██║ ██║ ██║╚██████╔╝██║ ╚████║ ║ ║ ╚═══╝ ╚═╝╚══════╝ ╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝╚══════╝╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═══╝ ║ ║ ║ ║ 🏆 The Most Comprehensive Data Visualization Library for SwiftUI 🏆 ║ ╚═══════════════════════════════════════════════════════════════════════════════════════════════════╝
🎯 8 Chart Types • 5 Advanced Visualizations • 6 Progress Indicators • 10+ Themes • D3.js-like Flexibility
| Feature | SwiftUICharts | Charts.org | Apple Charts | This Library |
|---|---|---|---|---|
| Chart Types | 5 | 8 | 6 | 8+ |
| Timelines | ❌ | ❌ | ❌ | ✅ |
| Flowcharts | ❌ | ❌ | ❌ | ✅ |
| Mind Maps | ❌ | ❌ | ❌ | ✅ |
| Org Charts | ❌ | ❌ | ❌ | ✅ |
| Network Graphs | ❌ | ❌ | ❌ | ✅ |
| Dashboards | ❌ | ❌ | ❌ | ✅ |
| Leaderboards | ❌ | ❌ | ❌ | ✅ |
| Progress Indicators | 1 | ❌ | ❌ | 6 |
| Data Transformers | ❌ | Basic | ❌ | ✅ |
| Theming System | Basic | Basic | ❌ | 10+ Themes |
| Export (PNG/PDF/SVG) | ❌ | ❌ | ❌ | ✅ |
| Accessibility | Basic | Basic | ✅ | ✅ VoiceOver |
| Real-time Updates | ❌ | ❌ | ✅ | ✅ |
┌─────────────────────────────────────────────────────────────────────────────────┐
│ LINE CHART BAR CHART PIE CHART AREA CHART │
│ ╭──╮ ┌───┐ ╭────╮ ╭──╮ │
│ ╱ ╲ ┌┤ │ ┌───┐ ╭────╮│████│ ╱████╲ │
│ ╱ ╲── ┌┤│ │ │ │ │░░░░││████│ ╱██████╲── │
│ ╱ ╲ └┴┴┴───┴─┴───┘ ╰────╯╰────╯ ╱████████████ │
├─────────────────────────────────────────────────────────────────────────────────┤
│ SCATTER PLOT RADAR CHART CANDLESTICK HEATMAP │
│ • • ╱╲ ┌─┐ ┌─┐ ┌──┬──┬──┬──┐ │
│ • • • ╱ ╲ │█│ │█│ │██│▓▓│░░│▒▒│ │
│ • • ╱──────╲ ──┼─┼───┼─┼── ├──┼──┼──┼──┤ │
│ • • ╲──╱ │█│ └─┘ │▒▒│░░│▓▓│██│ │
└─────────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────────┐
│ TIMELINE FLOWCHART MIND MAP │
│ │
│ ●────●────●────● ┌─────┐ ┌───┐ │
│ │ │ │ │ │Start│ ┌──┤ A ├──┐ │
│ 2021 2022 2023 2024 └──┬──┘ ┌──┴─┐└───┘┌─┴──┐ │
│ ▼ ▼ ▼ ▼ ▼ │ B │ │ C │ │
│ Evt1 Evt2 Evt3 Evt4 ┌───────┐ └────┘ └────┘ │
│ │Process│ │
│ └───┬───┘ │
├─────────────────────────────────────────────────────────────────────────────────┤
│ ORG CHART NETWORK GRAPH │
│ │
│ ┌─────┐ ●────● │
│ │ CEO │ ╱│╲ │ │
│ └──┬──┘ ● │ ●──● │
│ ┌────┼────┐ ╲│╱ │
│ ┌──┴─┐┌─┴──┐┌┴──┐ ● │
│ │CTO ││CFO ││CMO│ │
│ └────┘└────┘└───┘ Force-directed layout │
└─────────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────────┐
│ CIRCULAR LINEAR SEGMENTED RADIAL │
│ │
│ ╭───╮ ████████░░░░ ●──●──○──○ ╭───────╮ │
│ ╱ 75% ╲ Progress: 75% Step 2 of 4 ╱ ╭───╮ ╲ │
│ ╲ ╱ ╲ ╲60%╱ ╱ │
│ ╰───╯ ╰───────╯ │
├─────────────────────────────────────────────────────────────────────────────────┤
│ WAVE PROGRESS GAUGE PROGRESS │
│ │
│ ╭───────╮ ╭─────╮ │
│ │ ~~~~~ │ ╱ 72 ╲ │
│ │███████│ 65% ╱ │ ╲ │
│ ╰───────╯ 0 ─────┼───── 100 │
└─────────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────────────┐
│ STATISTICS CARD COMPARISON TABLE LEADERBOARD │
│ ┌─────────────────┐ ┌──────┬─────┬─────┐ ┌─────────────────┐ │
│ │ 📈 Revenue │ │ │Pro │Free │ │ 🥇 Alice 15.2K │ │
│ │ $24,500 │ │Users │ 10 │ 1 │ │ 🥈 Bob 14.1K │ │
│ │ ▲ +12.5% │ │API │ ✅ │ ❌ │ │ 🥉 Carol 13.8K │ │
│ │ ▁▂▃▄▅▆▇ │ │Price │ $29 │ $9 │ │ 4. David 12.5K │ │
│ └─────────────────┘ └──────┴─────┴─────┘ └─────────────────┘ │
├─────────────────────────────────────────────────────────────────────────────────┤
│ DASHBOARD │
│ ┌─────────────┬─────────────┬─────────────────────────────────────────────┐ │
│ │ Revenue │ Users │ Chart │ │
│ │ $24.5K │ 1,234 │ ╭──────╮ │ │
│ │ ▲ +12% │ ▲ +8% │ ╱ ╲ │ │
│ ├─────────────┴─────────────┤ ╱ ╲────── │ │
│ │ Activity Feed │ ╱ │ │
│ │ ● New user signed up │ ╱────────────────────────────── │ │
│ │ ● Order #12345 received │ │ │
│ └───────────────────────────┴─────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────────┘
// Package.swift
dependencies: [
.package(url: "https://github.com/muhittincamdali/SwiftUI-Data-Visualization.git", from: "2.0.0")
]import SwiftUIDataVisualization
// Line Chart
LineChart(data: [10, 25, 15, 30, 20], labels: ["Mon", "Tue", "Wed", "Thu", "Fri"])
.chartTheme(.vibrant)
.animated(true)
// Timeline
TimelineView(events: $events)
.configuration(TimelineConfiguration(orientation: .vertical, style: .modern))
// Dashboard
DashboardView(widgets: $widgets)
.configuration(DashboardConfiguration(columns: 3, style: .card))
// Progress Indicator
CircularProgressView(value: 75, label: "Storage")
.frame(width: 120, height: 120)| Theme | Best For |
|---|---|
.light |
Standard light mode apps |
.dark |
Dark mode interfaces |
.vibrant |
Marketing dashboards |
.minimal |
Clean, professional reports |
.ocean |
Finance & analytics |
.sunset |
Creative portfolios |
.forest |
Environmental data |
.neon |
Gaming & entertainment |
.corporate |
Enterprise applications |
let customTheme = ChartThemeBuilder(base: .light)
.primaryColor(.purple)
.colorPalette([.purple, .pink, .orange, .yellow])
.animationDuration(0.6)
.showGrid(false)
.build()
LineChart(data: data)
.chartTheme(customTheme)class DataSource: ObservableObject {
@Published var data: [ChartDataPoint] = []
func startLiveUpdates() {
Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in
self.data.append(ChartDataPoint(label: Date().formatted(), value: Double.random(in: 0...100)))
}
}
}// Group by date
let grouped = ChartDataTransformer.groupByDate(
data: sales,
dateKey: \.date,
valueKey: \.amount,
component: .month,
aggregation: .sum
)
// Moving average
let smoothed = ChartDataTransformer.movingAverage(data: timeSeries, windowSize: 7)
// Statistics
let stats = ChartDataTransformer.statistics(data: sales, valueKey: \.amount)
print("Mean: \(stats.mean), Std Dev: \(stats.standardDeviation)")// Filter by date range
let filtered = DataFilter.byDateRange(data: events, dateKey: \.date, from: startDate, to: endDate)
// Sort by value
let sorted = DataSorter.sort(data: entries, by: \.score, ascending: false)// PNG Export
if let pngData = ChartExporter.exportToPNG(view: myChart, size: CGSize(width: 800, height: 600), quality: .high) {
// Save or share
}
// PDF Export
if let pdfData = ChartExporter.exportToPDF(view: myChart, size: CGSize(width: 800, height: 600), title: "Sales Report") {
// Save or share
}
// CSV Export
let csv = ChartExporter.exportToCSV(data: salesData, columns: [
("Date", \.dateString),
("Amount", \.amountString),
("Category", \.category)
])
// JSON Export
let json = ChartExporter.exportToJSON(data: salesData)LineChart(data: salesData)
.chartAccessibility(
label: ChartAccessibilityProvider.lineChartDescription(
title: "Monthly Sales",
dataPoints: salesData.map { ($0.label, $0.value) },
unit: "dollars"
)
)LineChart(data: data)
.chartTheme(ChartTheme(colorPalette: AccessibleColors.colorBlindFriendly))// Automatic haptic feedback on interactions
ChartHaptics.dataPointSelected() // Light tap
ChartHaptics.peakDetected() // Medium impact
ChartHaptics.thresholdCrossed() // Warning notificationstruct AnalyticsDashboard: View {
@StateObject var dataSource = AnalyticsDataSource()
var body: some View {
DashboardView(widgets: $dataSource.widgets)
.configuration(DashboardConfiguration(
columns: 3,
style: .card,
showWidgetHeaders: true
))
.chartTheme(.corporate)
}
}struct ProjectTimeline: View {
@State var events = [
TimelineEvent(date: Date(), title: "Project Kickoff", icon: "star.fill", color: .blue),
TimelineEvent(date: Date().addingTimeInterval(86400 * 7), title: "Design Complete", icon: "paintbrush.fill", color: .purple),
TimelineEvent(date: Date().addingTimeInterval(86400 * 21), title: "Beta Release", icon: "rocket.fill", color: .orange)
]
var body: some View {
TimelineView(events: $events)
.configuration(TimelineConfiguration(
orientation: .vertical,
style: .alternating,
showConnectors: true
))
}
}struct GameLeaderboard: View {
@State var players = LeaderboardEntry.samplePlayers()
var body: some View {
LeaderboardView(entries: $players)
.configuration(LeaderboardConfiguration(
style: .podium,
showRankChange: true,
showTopThreeSpecial: true
))
}
}| Platform | Minimum Version |
|---|---|
| iOS | 15.0+ |
| macOS | 12.0+ |
| tvOS | 15.0+ |
| watchOS | 8.0+ |
| visionOS | 1.0+ |
| Swift | 5.9+ |
MIT License - see LICENSE for details.
Built with ❤️ for the SwiftUI community.
Inspired by D3.js, Recharts, and Apache ECharts.
⭐ Star this repo if you find it useful! ⭐