--- title: Building a sunburst diagram in Swift Charts | daily.dev description: A detailed walkthrough builds a three-level sunburst diagram in Swift Charts, starting from a basic pie chart and progressively adding donut rings, angular... canonical: https://daily.dev/posts/building-a-sunburst-diagram-in-swift-charts-pa8wdkc6c twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building a sunburst diagram in Swift Charts | daily.dev og:description: A detailed walkthrough builds a three-level sunburst diagram in Swift Charts, starting from a basic pie chart and progressively adding donut rings, angular... og:url: https://daily.dev/posts/building-a-sunburst-diagram-in-swift-charts-pa8wdkc6c og:image: https://api.daily.dev/og/posts/pA8wDKc6c.png og:image:alt: Building a sunburst diagram in Swift Charts og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Building a sunburst diagram in Swift Charts **[Nil Coalescing](https://daily.dev/sources/nilcoalescing)** · 20 min read · 0 upvotes · 0 comments ## Summary A detailed walkthrough builds a three-level sunburst diagram in Swift Charts, starting from a basic pie chart and progressively adding donut rings, angular insets, hierarchical range-based positioning to keep sectors aligned across rings, SF Symbol annotations centered via invisible anchor sectors, color opacity per ring level, widening radial gaps between categories, and accessibility-ordered VoiceOver labels using depth-first sector construction with Swift Algorithms' chunked and reductions operations. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I align sectors across multiple rings in a Swift Charts sunburst diagram? Give each sector an explicit start and end angle expressed as a range within 0.0..<1.0 instead of a plain magnitude value, since Swift Charts otherwise creates one shared angular scale and stacks each ring's sectors sequentially rather than aligning them with their parent. Divide a parent's range among its children proportionally to their duration using Swift Algorithms' reductions(_:_:) to accumulate boundaries, then pass angle: .value(name, sector.angularRange) to SectorMark for each ring. _daily.dev surfaces practical SwiftUI charting patterns for developers building custom visualizations._ ### How do I center an SF Symbol icon inside a Swift Charts sector annotation instead of it being off-center? Attach the annotation to a separate, invisible anchor SectorMark rather than the visible sector, because Swift Charts centers overlay annotations within the mark's rectangular bounding frame, which is not the same as the sector's angular or radial midpoint. Create a tiny angular range around the midpoint of the start and end angles, plus a thin radial band centered between the ring's inner and outer radius, set opacity to 0, and attach the annotation there. _developers polishing custom SwiftUI chart visuals can track these layout techniques on daily.dev._ ### How do I create widening radial gaps between categories in a multi-ring donut chart? Inset each parent's angular range before allocating its children's ranges within it, so the padding compounds through nested levels and the same angular width occupies more screen space farther from the center, visually widening the gap outward. Cap the inset at 45% of the range width (e.g. min(angularPadding/2, width*0.45)) to prevent a very narrow sector from collapsing to zero or reversing. _daily.dev helps developers building layered chart hierarchies keep these radial spacing tricks handy._ ## Similar posts on daily.dev - [Building an accessible calendar chart with Swift Charts](https://daily.dev/posts/building-an-accessible-calendar-chart-with-swift-charts-o2wzjpdld) · Nil Coalescing · 0 upvotes · 0 comments - [Swift Charts Beyond the Basics: creating clear and beautiful data visualizations](https://daily.dev/posts/swift-charts-beyond-the-basics-creating-clear-and-beautiful-data-visualizations-mwhetv3bj) · Nil Coalescing · 0 upvotes · 0 comments - [Create Stunning Nutrition Dashboards in WPF with Multi-Layer Pie Chart](https://daily.dev/posts/create-stunning-nutrition-dashboards-in-wpf-with-multi-layer-pie-chart-wzpbuwfue) · Syncfusion · 0 upvotes · 0 comments - [Build Interactive Doughnut Charts in .NET MAUI for Mobile Dashboards](https://daily.dev/posts/build-interactive-doughnut-charts-in-net-maui-for-mobile-dashboards-xydms4kqn) · Syncfusion · 1 upvotes · 0 comments --- Tags: [#swift](https://daily.dev/tags/swift), [#accessibility](https://daily.dev/tags/accessibility), [#data-visualization](https://daily.dev/tags/data-visualization), [#swiftui](https://daily.dev/tags/swiftui) [View this post on daily.dev](https://daily.dev/posts/building-a-sunburst-diagram-in-swift-charts-pa8wdkc6c) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Building a sunburst diagram in Swift Charts","url":"https://daily.dev/posts/building-a-sunburst-diagram-in-swift-charts-pa8wdkc6c","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/building-a-sunburst-diagram-in-swift-charts-pa8wdkc6c"},"datePublished":"2026-09-03T09:56:17.793Z","dateModified":"2026-09-03T10:09:05.180Z","description":"A detailed walkthrough builds a three-level sunburst diagram in Swift Charts, starting from a basic pie chart and progressively adding donut rings, angular...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/90f4ef1d507030113f6ff5bd7240787f?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/90f4ef1d507030113f6ff5bd7240787f?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Nil Coalescing","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Nil Coalescing","logo":"https://media.daily.dev/image/upload/s--rcEu6sag--/f_auto,q_auto/v1785654899/logos/nilcoalescing?_a=BAMAMicg0","url":"https://daily.dev/sources/nilcoalescing"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/building-a-sunburst-diagram-in-swift-charts-pa8wdkc6c","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"swift,accessibility,data-visualization,swiftui","timeRequired":"PT20M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Nil Coalescing","item":"https://daily.dev/sources/nilcoalescing"},{"@type":"ListItem","position":3,"name":"Building a sunburst diagram in Swift Charts"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/building-a-sunburst-diagram-in-swift-charts-pa8wdkc6c#faq","mainEntity":[{"@type":"Question","name":"How do I align sectors across multiple rings in a Swift Charts sunburst diagram?","acceptedAnswer":{"@type":"Answer","text":"Give each sector an explicit start and end angle expressed as a range within 0.0..<1.0 instead of a plain magnitude value, since Swift Charts otherwise creates one shared angular scale and stacks each ring's sectors sequentially rather than aligning them with their parent. Divide a parent's range among its children proportionally to their duration using Swift Algorithms' reductions(_:_:) to accumulate boundaries, then pass angle: .value(name, sector.angularRange) to SectorMark for each ring. daily.dev surfaces practical SwiftUI charting patterns for developers building custom visualizations."}},{"@type":"Question","name":"How do I center an SF Symbol icon inside a Swift Charts sector annotation instead of it being off-center?","acceptedAnswer":{"@type":"Answer","text":"Attach the annotation to a separate, invisible anchor SectorMark rather than the visible sector, because Swift Charts centers overlay annotations within the mark's rectangular bounding frame, which is not the same as the sector's angular or radial midpoint. Create a tiny angular range around the midpoint of the start and end angles, plus a thin radial band centered between the ring's inner and outer radius, set opacity to 0, and attach the annotation there. developers polishing custom SwiftUI chart visuals can track these layout techniques on daily.dev."}},{"@type":"Question","name":"How do I create widening radial gaps between categories in a multi-ring donut chart?","acceptedAnswer":{"@type":"Answer","text":"Inset each parent's angular range before allocating its children's ranges within it, so the padding compounds through nested levels and the same angular width occupies more screen space farther from the center, visually widening the gap outward. Cap the inset at 45% of the range width (e.g. min(angularPadding/2, width*0.45)) to prevent a very narrow sector from collapsing to zero or reversing. daily.dev helps developers building layered chart hierarchies keep these radial spacing tricks handy."}}]} ```