Contents

RectangleMark

Chart content that represents data using rectangles.

Declaration

@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:). 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:) 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))
    }
}

[Image]

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)
        )
    }
}

[Image]

RectangleMark in Chart3D

To plot a rectangle in a 3D Chart, use the init(x:y:z:) initializer.

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

See Also

Marks