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.