FreeCharts

Ring Chart

Apple Watch Activity Rings style concentric progress chart with animated ring growth, legend, and optional center content via ViewBuilder

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 nested concentric ring progress chart inspired by Apple Watch Activity Rings. Each ring animates from 0 to its target value on appear. Includes a bottom legend with colored bullet points. Supports optional center content via generic ViewBuilder. Pure SwiftUI implementation with no dependency on Swift Charts.

What you get

  • ✓280 lines of source code, ready to paste
  • ✓Source Code
  • ✓Usage
chartringprogressactivity ringsSwiftUI

Usage

With Custom Center Content

SWRingChart(data: [
    .init(label: "Move", value: 75, color: .red),
    .init(label: "Exercise", value: 50, color: .green),
    .init(label: "Stand", value: 90, color: .cyan)
]) {
    VStack {
        Image(systemName: "flame.fill")
            .font(.title)
            .foregroundStyle(.orange)
        Text("Activity")
            .font(.caption)
            .foregroundStyle(.secondary)
    }
}

Without Center Content (Custom Dimensions)

SWRingChart(
    data: [
        .init(label: "Partner", value: 80, color: .accentColor),
        .init(label: "Family", value: 91, color: .green),
        .init(label: "Social", value: 63, color: .orange)
    ],
    size: 200,
    ringWidth: 20,
    spacing: 8
)

More in Charts

All 8 skills in Charts