FreeCharts

Donut Chart

Interactive donut chart with tap-to-select interaction, category grouping, and center overlay showing count and category name 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

An interactive donut chart built on Swift Charts (SectorMark). Groups data by category and renders a pie chart with tap-to-select interaction. The selected category expands outward and dims the rest. A center overlay shows the count and category name. Items without a category are automatically grouped into "No Category".

What you get

  • ✓213 lines of source code, ready to paste
  • ✓Source Code
  • ✓Usage
chartdonutpiedata visualizationSwiftUISwift Charts

Usage

@State private var selectedCategory: String? = nil

// Define categories
let workCategory = SWDonutChart.Category(name: "Work")
let personalCategory = SWDonutChart.Category(name: "Personal")
let healthCategory = SWDonutChart.Category(name: "Health")

// Build data items
let sampleSubjects: [SWDonutChart.Subject] = [
    .init(name: "Meeting", category: workCategory),
    .init(name: "Report", category: workCategory),
    .init(name: "Email", category: workCategory),
    .init(name: "Shopping", category: personalCategory),
    .init(name: "Reading", category: personalCategory),
    .init(name: "Exercise", category: healthCategory),
    .init(name: "Meditation", category: healthCategory),
    .init(name: "Running", category: healthCategory),
    .init(name: "Uncategorized Task", category: nil),
]

// Use the component with binding
SWDonutChart(subjects: sampleSubjects, selectedCategory: $selectedCategory)
    .padding()

More in Charts

All 8 skills in Charts