---
title: RectangleMark
framework: charts
role: symbol
role_heading: Structure
path: charts/rectanglemark
---

# RectangleMark

Chart content that represents data using rectangles.

## Declaration

```swift
@MainActor @preconcurrency struct RectangleMark
```

## Overview

Overview Use rectangle mark to map data fields to rectangles. You can use the rectangle mark to create heat map charts or to annotate rectangular areas in a chart. Create a Heat Map with Rectangle Marks When presenting data about the effectiveness of a machine learning model, you typically organize the data using a confusion matrix which shows the predicted versus the actual results of the model. To create a 2D heat map that represents a machine learning model you use init(x:y:width:height:). The example below uses a 2D heat map to visualize a basic confusion matrix with the following layout:  |  |   |  |   |  |  The number of records in each cell, num,  is represented by the color of its corresponding rectangle. This is done by applying the foregroundStyle(by:) modifier to the rectangle mark and passing it a PlottableValue constructed with value(_:_:) which takes a label and the value to plot, in this case num. A scale from values of num to color will be automatically generated and used to color the rectangles based on the value. struct MatrixEntry {     var positive: String     var negative: String     var num: Double }

var data: [MatrixEntry] = [     MatrixEntry(positive: "+", negative: "+", num: 125),     MatrixEntry(positive: "+", negative: "-", num: 10),     MatrixEntry(positive: "-", negative: "-", num: 80),     MatrixEntry(positive: "-", negative: "+", num: 1) ]

var body: some View {     Chart(data) {         RectangleMark(             x: .value("Positive", $0.positive),             y: .value("Negative", $0.negative)         )         .foregroundStyle(by: .value("Number", $0.num))     } }

Annotate a Rectangular Area with Rectangle Marks You can annotate a specific region in a chart with a rectangle mark by providing the coordinates of one or more rectangles. For example you can annotate point marks with rectangle marks using a shared data source like in the example below: struct Coord {     var x: Double     var y: Double }

var data: [Coord] = [     Coord(x: 5, y: 5),     Coord(x: 2.5, y: 2.5),     Coord(x: 3, y: 3) ]

var body: some View {     Chart(data) {         RectangleMark(             xStart: .value("Rect Start Width", $0.x - 0.25),             xEnd: .value("Rect End Width", $0.x + 0.25),             yStart: .value("Rect Start Height", $0.y - 0.25),             yEnd: .value("Rect End Height", $0.y + 0.25)         )         .opacity(0.2)

PointMark(             x: .value("X", $0.x),             y: .value("Y", $0.y)         )     } }

RectangleMark in Chart3D To plot a rectangle in a 3D Chart, use the init(x:y:z:) initializer. important: A 3D RectangleMark requires one parameter to be a single numeric value and the other two parameters to be numeric ranges. The rectangle extends along the two axes that you provide ranges for, and is positioned at a point that you specify for the third axis. For example, the following Chart3D shows three rectangle marks. Each mark extends along two axes, and is fixed at 0 on the third axis. Chart3D {     // A rule that extends along the x-axis and y-axis     RectangleMark(         x: .value("x", -0.5..<0.5),         y: .value("y", -0.5..<0.5),         z: .value("z", 0)     )     .foregroundStyle(.red)     // A rule that extends along the y-axis and z-axis     RectangleMark(         x: .value("x", 0),         y: .value("y", -0.5..<0.5),         z: .value("z", -0.5..<0.5)     )     .foregroundStyle(.green)     // A rule that extends along the z-axis and x-axis     RectangleMark(         x: .value("x", -0.5..<0.5),         y: .value("y", 0),         z: .value("z", -0.5..<0.5)     )     .foregroundStyle(.blue) }

## Topics

### Creating a rectangle mark

- [init(x:yStart:yEnd:width:)](charts/rectanglemark/init(x:ystart:yend:width:)-vh2x.md)
- [init(x:yStart:yEnd:width:)](charts/rectanglemark/init(x:ystart:yend:width:)-xhqp.md)
- [init(xStart:xEnd:y:height:)](charts/rectanglemark/init(xstart:xend:y:height:)-27222.md)
- [init(xStart:xEnd:y:height:)](charts/rectanglemark/init(xstart:xend:y:height:)-4x46i.md)
- [init(xStart:xEnd:yStart:yEnd:)](charts/rectanglemark/init(xstart:xend:ystart:yend:)-1qbzg.md)
- [init(xStart:xEnd:yStart:yEnd:)](charts/rectanglemark/init(xstart:xend:ystart:yend:)-5682c.md)
- [init(xStart:xEnd:yStart:yEnd:)](charts/rectanglemark/init(xstart:xend:ystart:yend:)-5cbgh.md)
- [init(xStart:xEnd:yStart:yEnd:)](charts/rectanglemark/init(xstart:xend:ystart:yend:)-6jeka.md)
- [init(x:y:width:height:)](charts/rectanglemark/init(x:y:width:height:).md)
- [init(x:y:z:)](charts/rectanglemark/init(x:y:z:).md)

## Relationships

### Conforms To

- [Chart3DContent](charts/chart3dcontent.md)
- [ChartContent](charts/chartcontent.md)
- [Copyable](swift/copyable.md)
- [Escapable](swift/escapable.md)
- [Sendable](swift/sendable.md)
- [SendableMetatype](swift/sendablemetatype.md)

## See Also

### Marks

- [AreaMark](charts/areamark.md)
- [LineMark](charts/linemark.md)
- [PointMark](charts/pointmark.md)
- [RuleMark](charts/rulemark.md)
- [BarMark](charts/barmark.md)
- [SectorMark](charts/sectormark.md)