DevTechie/Mastering Charts Framework in SwiftUI & iOS 18

  • $29.99

Mastering Charts Framework in SwiftUI & iOS 18

  • Course
  • 49 Lessons

Master data visualization in SwiftUI with our comprehensive Swift Charts course. Learn to create stunning, interactive charts using built-in chart types like bar, line, area, scatter, and pie. Explore advanced topics like annotations, multi-series charts, vectorized plots (iOS 18), chart styling, overlays, and axis customization. Perfect for iOS developers aiming to bring data to life with Swift Charts.

Contents

Introduction

Swift Charts framework was introduced in SwiftUI with the release of iOS 16, it provides a robust and intuitive toolkit for creating a wide range of visually appealing and informative charts. This declarative framework empowers developers to effortlessly build charts that seamlessly integrate with their SwiftUI applications.

Introduction to Swift Charts
Preview
Benefits of Using Swift Charts Over Other Libraries
Preview
Getting Started with Chart view
Preview
Marks in Swift Charts
Preview

Bar Charts using BarMark

Bar charts are a fundamental visualization tool used to compare categorical data. They consist of rectangular bars, where the length of each bar represents the value of a specific category. Bar charts are effective for displaying data that can be grouped into discrete categories, such as months, products, or demographics.

Bar Chart using BarMark
Preview
Bar Marks with Dynamic Data
Preview
Bar Mark Formatting Options
Preview
Bar Chart Foreground Style Scale
Enhance Bar Charts with Annotations
Stacked Bar Chart
Multi-Series Bar Chart
Custom Bar Placement in BarMark

Line Charts using LineMark

A line chart is an effective way to display trends over time by connecting a series of data points with straight lines. It’s commonly used for tracking changes in stock prices, temperatures, website traffic, or any data that varies continuously. Each point represents a value at a specific moment, and the line helps highlight changes and patterns.

With Swift Charts framework, creating such visualizations in SwiftUI is both simple and enjoyable. We’ve explored how BarMark can be used to build informative bar charts. In this chapter, we turn our attention to LineMark, which allows us to create smooth, connected line charts.

Creating Line Charts with LineMark
Annotating a Line Chart
Multi-Series Line Chart

Area Charts using AreaMark

Area charts are created using the AreaMark. AreaMark is ideal for visualizing continuous data trends over time or categories by filling the space beneath a line to emphasize volume or magnitude.

This type of chart is especially useful for showing how values accumulate or fluctuate, making patterns easier to see at a glance compared to a line chart alone.

With AreaMark, you can create a variety of area chart styles—including stacked, overlapping, or gradient-filled areas—using just a few lines of SwiftUI code.

Area Charts
Multi-Series Area Chart

RectangleMark in Charts Framework

RectangleMark is a versatile and expressive component within the Charts framework that allows developers to build clear, data-rich visualizations with minimal code. From weather trends to candlestick charts, it can effectively represent ranges, comparisons, and fluctuations in values across time or categories.

Rectangle Mark in SwiftUI

Point Charts using PointMark

PointMark in Swift Charts enables the creation of point-based visualizations, including scatter plots. Scatter plots are ideal for showcasing the relationship or correlation between two numerical variables.

Point Chart for Scatter Plots

Combined Chart

Swift Charts empowers us to build rich, multi-layered visualizations by combining different types of marks within a single chart. Whether it’s AreaMark, BarMark, LineMark, PointMark, RectangleMark, SectorMark, or RuleMark, each serves a unique purpose in representing data

Rule Mark & Combined Chart
Range Area Chart
Range Chart using BarMark, RectangleMark and RuleMark

SectorMarks for Pie Charts

Starting with SwiftUI 5 and iOS 17, the Charts framework introduces a powerful new addition to plot pie and donutcharts. These charts are created using the newly introduced SectorMark, which allows us to visually represent parts of a whole. A sector in a chart refers to a slice of a pie or donut chart, effectively showing how individual categories contribute to the total value.

Pie & Donut Charts with SectorMark
SwiftUI Pie & Donut Charts Quiz

Vectorized Plots

With iOS 18, Swift Charts introduces vectorized plots, a powerful way to efficiently render large datasets or mathematical functions using a single plot instance instead of individual marks for each data point. This new feature is designed to significantly improve performance and simplify chart creation—especially when all elements share the same style or configuration.

Vectorized Plots in Swift Charts (iOS 18)
AreaPlot : Vectorized Plots
BarPlot : Vectorized Plots
LinePlot : Vectorized Plots
PointPlot & RectanglePlot : Vectorized Plots
SectorPlot : Vectorized Plots

Chart Configurations

Swift Charts offer a wide range of configuration options through SwiftUI modifiers. In the following chapters, we’ll explore these options in detail.

ChartPlotStyle, ChartBackground & ChartOverlay Customization
Charts Framework Legend
Chart Axis Content and Axis Marks
Chart Axis Configuration
Chart Scale Type
Chart Symbol Shape in Charts Framework
Align Chart’s Mark style with Chart Plot Area

Chart interactivity

Chart interactivity allows us to create engaging and dynamic data visualizations by enabling user interactions like selection, highlighting, and tooltips, making it easier for users to explore and understand complex data intuitively.

Chart Scroll Behavior
Pie Chart Interaction with ChartAngleSelection
Chart Interaction using ChartOverlay
Interactive Line Chart in Swift Charts with ChartProxy and Gesture Overlay
Chart Gesture Modifier
Empty State Chart : Perfect Blend of LineMark, AreaMark and RuleMark

Animated Charts

Swift Chart animations bring your data to life by smoothly transitioning chart elements—such as lines, areas, and points—making your visualizations more dynamic, engaging, and easier to understand.

Animated Bar and Line Charts
Animated Reveal Chart
Layered Chart Animation
Animated Pie Charts

3D Charts - Xcode 26+, iOS, macOS, visionOS, watchOS & iPadOS 26+

With Xcode 26 and later, Swift Charts introduces powerful 3D visualization capabilities across all Apple platforms — iOS, macOS, visionOS, watchOS, and iPadOS 26+. The new Chart3D view lets you plot and explore multivariate data in a rich, interactive 3D space. Whether you want to visualize mathematical functions, geographic landscapes, or complex datasets, 3D charts enable you to bring depth, texture, and a new dimension of insight to your charts — all within SwiftUI.

Chart3D View in Xcode 26+
3D SurfacePlot Xcode 26+