# RectangleMark Chart content that represents data using rectangles. ``` @MainActor @preconcurrency struct RectangleMark ``` ## 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:)`](/documentation/Charts/RectangleMark/init(x:y:width:height:)). The example below uses a 2D heat map to visualize a basic confusion matrix with the following layout: | |Negative |Positive | |------------|--------------|--------------| |**Negative**|True Negative |False Negative| |**Positive**|False Positive|True Positive | 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:)`](/documentation/Charts/ChartContent/foregroundStyle(by:)) modifier to the rectangle mark and passing it a [`PlottableValue`](/documentation/Charts/PlottableValue) constructed with [`value(_:_:)`](/documentation/Charts/PlottableValue/value(_:_:)-13lvv) 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. ```swift 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: ```swift 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:)`](/documentation/Charts/RectangleMark/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. ```swift 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:)`](/documentation/Charts/RectangleMark/init(x:yStart:yEnd:width:)-vh2x) Creates a rectangle mark with an y interval encoding and an x encoding. [`init(x:yStart:yEnd:width:)`](/documentation/Charts/RectangleMark/init(x:yStart:yEnd:width:)-xhqp) Creates a rectangle mark that plots values on x and has a fixed y interval. [`init(xStart:xEnd:y:height:)`](/documentation/Charts/RectangleMark/init(xStart:xEnd:y:height:)-27222) Creates a rectangle mark with an x interval encoding and a y encoding. [`init(xStart:xEnd:y:height:)`](/documentation/Charts/RectangleMark/init(xStart:xEnd:y:height:)-4x46i) Creates a rectangle mark with a fixed x interval and y encoding. [`init(xStart:xEnd:yStart:yEnd:)`](/documentation/Charts/RectangleMark/init(xStart:xEnd:yStart:yEnd:)-1qbzg) Creates a rectangle mark with x and y interval encodings. [`init(xStart:xEnd:yStart:yEnd:)`](/documentation/Charts/RectangleMark/init(xStart:xEnd:yStart:yEnd:)-5682c) Creates a rectangle mark with fixed x and y intervals. [`init(xStart:xEnd:yStart:yEnd:)`](/documentation/Charts/RectangleMark/init(xStart:xEnd:yStart:yEnd:)-5cbgh) Creates a rectangle mark with a y interval encoding and a fixed x interval. [`init(xStart:xEnd:yStart:yEnd:)`](/documentation/Charts/RectangleMark/init(xStart:xEnd:yStart:yEnd:)-6jeka) Creates a rectangle mark with an x interval encoding and a fixed y interval. [`init(x:y:width:height:)`](/documentation/Charts/RectangleMark/init(x:y:width:height:)) Creates a rectangle that plots values with x and y. [`init(x:y:z:)`](/documentation/Charts/RectangleMark/init(x:y:z:)) Creates a rectangle mark for a 3D chart. ## Relationships ### Conforms To [`Chart3DContent`](/documentation/Charts/Chart3DContent) [`SendableMetatype`](/documentation/Swift/SendableMetatype) [`Escapable`](/documentation/Swift/Escapable) [`Copyable`](/documentation/Swift/Copyable) [`ChartContent`](/documentation/Charts/ChartContent) [`Sendable`](/documentation/Swift/Sendable) --- Copyright © 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)