<!--
{
  "availability" : [
    "iOS: 16.0.0 -",
    "iPadOS: 16.0.0 -",
    "macCatalyst: 16.0.0 -",
    "macOS: 13.0.0 -",
    "tvOS: 16.0.0 -",
    "visionOS: 1.0.0 -",
    "watchOS: 9.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "Charts",
  "identifier" : "/documentation/Charts/PointMark",
  "metadataVersion" : "0.1.0",
  "role" : "Structure",
  "symbol" : {
    "kind" : "Structure",
    "modules" : [
      "Swift Charts"
    ],
    "preciseIdentifier" : "s:6Charts9PointMarkV"
  },
  "title" : "PointMark"
}
-->

# PointMark

Chart content that represents data using points.

```
@MainActor @preconcurrency struct PointMark
```

## 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:

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

![A scatter plot with wing width plotted on the x-axis and wing height plotted on the y-axis. There are 12 points on the chart that demonstrate a roughly linear relationship between wing width and height.](images/com.apple.Charts/PointMarkSwift.PointMarkScatterChart@2x.png)

### 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                          |
|---------------------------------------------------------------------------------|----------------------------------------|
|``doc://com.apple.Charts/documentation/Charts/ChartContent/foregroundStyle(by:)``|plot an additional property with color  |
|``doc://com.apple.Charts/documentation/Charts/ChartContent/symbol(by:)``         |plot an additional property with symbols|
|``doc://com.apple.Charts/documentation/Charts/ChartContent/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:)`](/documentation/Charts/ChartContent/foregroundStyle(by:)) modifier:

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

![A scatter plot with wing width plotted on the x-axis, wing height plotted on the y-axis, and insect family mapped to a color. There are 12 points on the chart that demonstrate a roughly linear relationship between wing width and height. The points appear in 3 clusters of 4 points each, where the points in each cluster have a different color. The cluster in the lower left has blue points. The cluster in the middle has green points. The cluster in the upper right has orange points. A legend below the plot maps each color to a different insect family. The mappings are Diptera in blue, Hymenoptera in green, and Lepidoptera in orange.](images/com.apple.Charts/PointMarkSwift.PointMarkScatterChartModifiedForegroundColor@2x.png)

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:)`](/documentation/Charts/ChartContent/symbol(by:)) modifier:

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

![A scatter plot with wing width plotted on the x-axis, wing height plotted on the y-axis, and insect family mapped to a symbol. There are 12 points on the chart that demonstrate a roughly linear relationship between wing width and height. The points appear in 3 clusters of 4 points each, where the points in each cluster have different symbols. The cluster in the lower left has circular points. The cluster in the middle has square points. The cluster in the upper right has triangular points. A legend below the plot maps each symbol to a different insect family. The mappings are circles for Diptera, squares for Hymenoptera, and triangles for Lepidoptera.](images/com.apple.Charts/PointMarkSwift.PointMarkScatterChartModifiedSymbol@2x.png)

### PointMark in Chart3D

To make a point in a 3D Chart, use the [`init(x:y:z:)`](/documentation/Charts/PointMark/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`:

```swift
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`](/documentation/Charts/Chart3DSymbolShape/sphere), [`cylinder`](/documentation/Charts/Chart3DSymbolShape/cylinder), [`cone`](/documentation/Charts/Chart3DSymbolShape/cone),
and [`cube`](/documentation/Charts/Chart3DSymbolShape/cube). Combined with the [`symbolSize(_:)`](/documentation/Charts/Chart3DContent/symbolSize(_:))
and [`symbolRotation(_:)`](/documentation/Charts/Chart3DContent/symbolRotation(_:)) modifiers, you can provide rich customizations for your 3D points:

```swift
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

[`init(x:y:)`](/documentation/Charts/PointMark/init(x:y:)-44ke9)

Creates a point mark that plots values to x and y.

[`init(x:y:)`](/documentation/Charts/PointMark/init(x:y:)-9dswq)

Creates a point mark with fixed x position and plots values with y.

[`init(x:y:)`](/documentation/Charts/PointMark/init(x:y:)-9hppd)

Creates a point mark that plots a value on x with fixed y position.

[`init(x:y:z:)`](/documentation/Charts/PointMark/init(x:y:z:))

Creates a 3D point mark that plots values to x, y and z.

## Relationships

### Conforms To

[`Escapable`](/documentation/Swift/Escapable)

[`ChartContent`](/documentation/Charts/ChartContent)

[`Sendable`](/documentation/Swift/Sendable)

[`Chart3DContent`](/documentation/Charts/Chart3DContent)

[`Copyable`](/documentation/Swift/Copyable)

[`SendableMetatype`](/documentation/Swift/SendableMetatype)

---

Copyright &copy; 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)