Marks in Swift Charts

Marks in Swift Charts

Marks in Swift Charts are the visual elements that represent individual data points in a chart. They can be customized to control their appearance and behavior, such as their shape, size, color, and interaction.

Marks used in Swift Charts are:

  • BarMark: We use BarMark to represent data as rectangular bars, often used in bar charts.

  • AreaMark: We use an AreaMark to represent data as filled regions on a chart. For example, we can use an AreaMark to plot an area chart to visualize the cost of pizza over the last 10 years.

  • LineMark: We use a LineMark to represent data using a sequence of connected line segments. For example, we can use a LineMark to plot a line chart to visualize and compare the performance of various stocks.

  • SectorMark: SectorMark was introduced in WWDC23 with iOS 17 launch. This mark is used to create pie or donut chart. Each sector of a pie or donut chart shows how individual categories make up a meaningful total.

  • PointMark: We use a PointMark to represent data using points. We can create various types of point charts using the PointMark chart. One common chart built with PointMarks is called a scatter plot. The scatter plot is used to display the relationship between two numerical data properties. For example, we can use a scatter plot to visualize the sale of ice cream as the weather gets hotter and the temperature increases.

  • RectangleMark: We use RectangleMark to represent data using rectangles. RectangleMarks are used to build heat map charts.

  • RuleMark: We use RuleMark to represent data using a single vertical or horizontal rule. We can annotate a chart with horizontal or vertically spanning RuleMark which allows viewers to easily compare values over a range to a constant value.

Customization options for marks include:

  • Shape: Change the shape of the mark (e.g., circle, square, triangle).

  • Size: Adjust the size of the mark.

  • Color: Set the color of the mark.

  • Opacity: Control the transparency of the mark.

  • Stroke: Customize the stroke (outline) of the mark, including color, width, and style.

  • Fill: Set the fill color for marks like areas or bars.

Mastering Charts Framework in SwiftUI & iOS 18

Buy nowLearn more

Introduction

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

Bar Charts using BarMark

  • Bar Chart using BarMark
  • Bar Marks with Dynamic Data
  • Bar Mark Formatting Options
  • 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

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

Area Charts using AreaMark

  • Area Charts
  • Multi-Series Area Chart

RectangleMark in Charts Framework

  • Rectangle Mark in SwiftUI

Point Charts using PointMark

  • Point Chart for Scatter Plots

Combined Chart

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

SectorMarks for Pie Charts

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

Vectorized Plots

  • 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

  • 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 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

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

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

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