Chart content that represents data using rectangles.
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:
| | 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 ``ChartContent/foregroundStyle(by:)`` modifier to the rectangle mark and passing it a ``PlottableValue`` constructed with ``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:)`` 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)
}
```
nonisolated init<X, Y>(x: PlottableValue<X>, y: PlottableValue<Y>, width: MarkDimension = .automatic, height: MarkDimension = .automatic) where X : Plottable, Y : Plottable
Creates a rectangle that plots values with x and y.
- Parameters:
- x: The value plotted with x.
- y: The value plotted with y.
- width: The rectangle width. If `width` is not specified, then 70% of the step size will be used. If there is no step size a default width (in pts) will be used.
- height: The rectangle height. If `height` is not specified, then 70% of the step size will be used. If there is no step size a default height (in pts) will be used.
### Discussion
Use this initializer to map an x and y position to a rectangle for each data element. Optionally, specify the width or height of the rectangles.
The example below omits the optional `width` and `height` parameters and uses a number scale starting at (0,0). The rectangle has the coordinates:
(0,0), (0,3), (3,0), (3,3).
```swift
Chart(data) {
RectangleMark(
x: .value("Rect X", 3),
y: .value("Rect Y", 3)
)
.opacity(0.2)
PointMark(
x: .value("X", $0.x),
y: .value("Y", $0.y)
)
}
```
nonisolated init<X>(x: PlottableValue<X>, yStart: CGFloat? = nil, yEnd: CGFloat? = nil, width: MarkDimension = .automatic) where X : Plottable
Creates a rectangle mark that plots values on x and has a fixed y interval.
- Parameters:
- x: The value plotted with x.
- width: The rectangle width. If `width` is not specified, then 70% of the step size will be used. If there is no step size a default width (in pts) will be used.
- yStart: The y start position. If `yStart` is `nil` then the rectangle will start at the leading edge of the plotting area.
- yEnd: The y end position. If `yEnd` is `nil` then the rectangle will end at the trailing edge of the plotting area.
### Discussion
Use this initializer to map an x position to a rectangle for each data element. Optionally, specify the width, yStart position, or yEnd positions of the rectangles.
The example below omits the optional `width`, `yStart`, and `yEnd` parameters and uses a number scale starting at (0,0) and ending at (6,6). The
rectangle has the coordinates: (0,0), (0,6), (3,6), (3,0).
```swift
Chart(data) {
RectangleMark(
x: .value("Rect X", 3)
)
.opacity(0.2)
PointMark(
x: .value("X", $0.x),
y: .value("Y", $0.y)
)
}
```
nonisolated init<X, Y>(x: PlottableValue<X>, yStart: PlottableValue<Y>, yEnd: PlottableValue<Y>, width: MarkDimension = .automatic) where X : Plottable, Y : Plottable
Creates a rectangle mark with an y interval encoding and an x encoding.
- Parameters:
- yStart: The value plotted with x start.
- yEnd: The value plotted with x end.
- x: The value plotted with y.
- width: The rectangle width. If `width` is not specified, then 70% of the step size will be used. If there is no step size a default width (in pts) will be used.
### Discussion
Use this initializer to map the y start, y end and x position to a rectangle for each data element. Optionally, specify the width of the rectangles.
The example below omits the optional `width` field and uses a number scale starting at (0,0) and ending at (6,6). The rectangle has the coordinates:
(0,2), (0,4), (4,4), (4,2).
```swift
Chart(data) {
RectangleMark(
yStart: .value("Rect yStart", 2),
yEnd: .value("Rect yEnd", 4),
x: .value("Rect X", 4)
)
.opacity(0.2)
PointMark(
x: .value("X", $0.x),
y: .value("Y", $0.y)
)
}
```
Creates a rectangle mark with fixed x and y intervals.
- Parameters:
- xStart: The x start position. If `xStart` is `nil` then the rectangle will start at the leading edge of the plotting area.
- xEnd: The x end position. If `xEnd` is `nil` then the rectangle will end at the trailing edge of the plotting area.
- yStart: The y start position. If `yStart` is `nil` then the rectangle will start at the leading edge of the plotting area.
- yEnd: The y end position. If `yEnd` is `nil` then the rectangle will end at the trailing edge of the plotting area.
### Discussion
Use this initializer to create one rectangle with any optional x start, x end, y start, and y end position. If no parameters are specified the rectangle will fill the
plotting area of the chart.
The example below uses a number scale starting at (0,0) and ending at (6,6). The rectangle has the coordinates: (2,2), (2,4), (4,4), (4,2).
```swift
Chart(data) {
RectangleMark()
.opacity(0.2)
PointMark(
x: .value("X", $0.x),
y: .value("Y", $0.y)
)
}
```
nonisolated init<Y>(xStart: CGFloat? = nil, xEnd: CGFloat? = nil, yStart: PlottableValue<Y>, yEnd: PlottableValue<Y>) where Y : Plottable
Creates a rectangle mark with a y interval encoding and a fixed x interval.
- Parameters:
- yStart: The value plotted with y end.
- yEnd: The value plotted with y end.
- xStart: The x start position. If `xStart` is `nil` then the rectangle will start at the leading edge of the plotting area.
- xEnd: The x end position. If `xEnd` is `nil` then the rectangle will end at the trailing edge of the plotting area.
### Discussion
Use this initializer to map the y start and y end position to a rectangle for each data element. Optionally, specify the xStart or xEnd position of the rectangles.
The example below omits the optional `x` and `width` fields and uses a number scale starting at (0,0) and ending at (6,6). The rectangle has the
coordinates: (0,2), (0,4), (6,4), (6,2).
```swift
Chart(data) {
RectangleMark(
yStart: .value("Rect yStart", 2),
yEnd: .value("Rect yEnd", 4)
)
.opacity(0.2)
PointMark(
x: .value("X", $0.x),
y: .value("Y", $0.y)
)
}
```
nonisolated init<X>(xStart: PlottableValue<X>, xEnd: PlottableValue<X>, yStart: CGFloat? = nil, yEnd: CGFloat? = nil) where X : Plottable
Creates a rectangle mark with an x interval encoding and a fixed y interval.
- Parameters:
- xStart: The value plotted with x start.
- xEnd: The value plotted with x end.
- yStart: The y end position. If `yStart` is `nil` then the rectangle will start at the leading edge of the plotting area.
- yEnd: The y end position. If `yEnd` is `nil` then the rectangle will end at the trailing edge of the plotting area.
### Discussion
Use this initializer to map the x start and x end to a rectangle for each data element. Optionally, specify the yStart or yEnd position of the rectangles.
The example below omits the optional `y` and `height` fields and uses a number scale starting at (0,0) and ending at (6,6). The rectangle has the
coordinates: (2,0), (2,6), (4,6), (4,0).
```swift
Chart(data) {
RectangleMark(
xStart: .value("Rect xStart", 2),
xEnd: .value("Rect xEnd", 4)
)
.opacity(0.2)
PointMark(
x: .value("X", $0.x),
y: .value("Y", $0.y)
)
}
```
nonisolated init<X, Y>(xStart: PlottableValue<X>, xEnd: PlottableValue<X>, yStart: PlottableValue<Y>, yEnd: PlottableValue<Y>) where X : Plottable, Y : Plottable
Creates a rectangle mark with x and y interval encodings.
- Parameters:
- xStart: The value plotted with x start.
- xEnd: The value plotted with x end.
- yStart: The value plotted with y start.
- yEnd: The value plotted with y end.
### Discussion
Use this initializer to map the x start, x end, y start, and y end position to a rectangle for each data element.
The example below uses a number scale starting at (0,0) and ending at (6,6). The rectangle has the coordinates: (2,2), (2,4), (4,4), (4,2).
```swift
Chart(data) {
RectangleMark(
xStart: .value("Rect xStart", 2),
xEnd: .value("Rect xEnd", 4),
yStart: .value("Rect yStart", 2),
yEnd: .value("Rect yEnd", 4)
)
.opacity(0.2)
PointMark(
x: .value("X", $0.x),
y: .value("Y", $0.y)
)
}
```
nonisolated init<Y>(xStart: CGFloat? = nil, xEnd: CGFloat? = nil, y: PlottableValue<Y>, height: MarkDimension = .automatic) where Y : Plottable
Creates a rectangle mark with a fixed x interval and y encoding.
- Parameters:
- xStart: The x start position. If `xStart` is `nil` then the rectangle will start at the leading edge of the plotting area.
- xEnd: The x end position. If `xEnd` is `nil` then the rectangle will end at the trailing edge of the plotting area.
- y: The value plotted with y.
- height: The rectangle height. If `height` is not specified, then 70% of the step size will be used. If there is no step size a default height (in pts) will be used.
### Discussion
Use this initializer to map a y position to a rectangle for each data element. Optionally, specify the height, xStart position, or xEnd position, of the rectangles.
The example below omits the optional `x`, `width`, and `height` parameters and uses a number scale starting at (0,0) and ending at (6,6). The
rectangle has the coordinates: (0,0), (0,3), (6,3), (6,0).
```swift
Chart(data) {
RectangleMark(
y: .value("Rect Y", 3)
)
.opacity(0.2)
PointMark(
x: .value("X", $0.x),
y: .value("Y", $0.y)
)
}
```
nonisolated init<X, Y>(xStart: PlottableValue<X>, xEnd: PlottableValue<X>, y: PlottableValue<Y>, height: MarkDimension = .automatic) where X : Plottable, Y : Plottable
Creates a rectangle mark with an x interval encoding and a y encoding.
- Parameters:
- xStart: The value plotted with x start.
- xEnd: The value plotted with x end.
- y: The value plotted with y.
- height: The rectangle height. If `height` is not specified, then 70% of the step size will be used. If there is no step size a default height (in pts) will be used.
### Discussion
Use this initializer to map the x start, x end and y position to a rectangle for each data element. Optionally, specify the height of the rectangles.
The example below omits the optional `height` parameter and uses a number scale starting at (0,0) and ending at (6,6). The rectangle has the coordinates:
(2,0), (2,4), (4,4), (4,0).
```swift
Chart(data) {
RectangleMark(
xStart: .value("Rect xStart", 2),
xEnd: .value("Rect xEnd", 4),
y: .value("Rect Y", 4)
)
.opacity(0.2)
PointMark(
x: .value("X", $0.x),
y: .value("Y", $0.y)
)
}
```
Skipped declarations
1 declarations were excluded from these bindings. Each reason comes from the generator or the iOS SDK compiler.
RectangleMark.init(x:y:z:)
This protocol needs associated types that cannot yet cross the bridge.
