Contents

PointMark

Chart content that represents data using points.

Declaration

@MainActor @preconcurrency struct PointMark

Mentioned in

Overview

You can create different kinds of point charts using the PointMark chart content. One common chart you can build with point marks is a scatter plot which displays the relationship between two numerical data properties. To build a scatter plot use the init(x:y:). Provide a .value for both the x and y parameters with a string, used as a label for the data, and the data element to be plotted. The following example plots the wingLength and wingHeight properties with x and y, respectively:

struct Insect {
    let name: String
    let family: String
    let wingLength: Double
    let wingWidth: Double
    let weight: Double
}

var data: [Insect] = [
    Insect(name: "Hepialidae", family: "Lepidoptera", wingLength: 61, wingWidth: 52, weight: 22),
    Insect(name: "Danaidae", family: "Lepidoptera", wingLength: 60, wingWidth: 48, weight: 24),
    Insect(name: "Riodinidae", family: "Lepidoptera", wingLength: 53, wingWidth: 43, weight: 18),
    // ...
]

var body: some View {
    Chart(data) {
        PointMark(
            x: .value("Wing Length", $0.wingLength),
            y: .value("Wing Width", $0.wingWidth)
        )
    }
}

[Image]

Adding Additional Data Fields

Swift Charts provides three additional modifiers for point mark that each allow you to plot an additional property to a unique visual channel.

Modifier

Visual Channel

Foregroundstyle(by:)

plot an additional property with color

Symbol(by:)

plot an additional property with symbols

Symbolsize(by:)

plot an additional property with size

For example, to plot the family property from the previous example’s Insect structure as a color, add the foregroundStyle(by:) modifier:

Chart(data) {
    PointMark(
        x: .value("Wing Length", $0.wingLength),
        y: .value("Wing Width", $0.wingWidth)
    )
    .foregroundStyle(by: .value("Family", $0.family))
}

[Image]

The foreground style modifier automatically generates a color scale that provides each mark with a color that reflects its value property. To learn how to modify the default color scale, see ScaleModifiers. The modifier also provides a default legend. To learn how to modify or disable the legend, see ChartLegend.

Alternatively, you can distinguish families with different symbols by plotting the family property using the symbol(by:) modifier:

Chart(data) {
    PointMark(
        x: .value("Wing Length", $0.wingLength),
        y: .value("Wing Width", $0.wingWidth)
    )
    .symbol(by: .value("Family", $0.family))
}

[Image]

PointMark in Chart3D

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

In addition to an x and y value, you can now position your PointMark along the z axis.

For example, in addition to plotting an insect’s wingLength and wingWidth you can also plot their weight with the following Chart3D:

Chart3D(data) {
    PointMark(
        x: .value("Wing Length", $0.wingLength),
        y: .value("Wing Width", $0.wingWidth),
        z: .value("Weight", $0.weight)
    )
    .foregroundStyle(by: .value("Category", $0.family))
}

Styling a 3D PointMark

3D points also offer symbols, such as sphere, cylinder, cone, and cube. Combined with the symbolSize(_:) and symbolRotation(_:) modifiers, you can provide rich customizations for your 3D points:

Chart3D(PointMarkData.insectData) {
    PointMark(
        x: .value("Wing Length", $0.wingLength),
        y: .value("Wing Width", $0.wingWidth),
        z: .value("Weight", $0.weight)
    )
    .symbol(.cone)
    .symbolSize(0.05)
    .foregroundStyle(by: .value("Category", $0.family))
}

Topics

Creating a point mark

See Also

Marks