<!--
{
  "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/LineMark",
  "metadataVersion" : "0.1.0",
  "role" : "Structure",
  "symbol" : {
    "kind" : "Structure",
    "modules" : [
      "Swift Charts"
    ],
    "preciseIdentifier" : "s:6Charts8LineMarkV"
  },
  "title" : "LineMark"
}
-->

# LineMark

Chart content that represents data using a sequence of connected line segments.

```
@MainActor @preconcurrency struct LineMark
```

## Overview

You create a line chart by plotting a category or date property, typically with the x position, and plotting a number category, typically with the y position. The example
below plots the `date` property to the x position and the `hoursOfSunshine` property to the y position using [`init(x:y:)`](/documentation/Charts/LineMark/init(x:y:)):

```swift
struct MonthlyHoursOfSunshine {
    var date: Date
    var hoursOfSunshine: Double

    init(month: Int, hoursOfSunshine: Double) {
        let calendar = Calendar.autoupdatingCurrent
        self.date = calendar.date(from: DateComponents(year: 2020, month: month))!
        self.hoursOfSunshine = hoursOfSunshine
    }
}

var data: [MonthlyHoursOfSunshine] = [
    MonthlyHoursOfSunshine(month: 1, hoursOfSunshine: 74),
    MonthlyHoursOfSunshine(month: 2, hoursOfSunshine: 99),
    // ...
    MonthlyHoursOfSunshine(month: 12, hoursOfSunshine: 62)
]

var body: some View {
    Chart(data) {
        LineMark(
            x: .value("Month", $0.date),
            y: .value("Hours of Sunshine", $0.hoursOfSunshine)
        )
    }
}
```

![Line chart with date on x-axis and hours of sunshine on y-axis. One line showing 12 points representing hours of sunshine in a month 1 74, 2 99, 3 154, 4 201, 5 247, 6 234, 7 304, 8 248, 9 197, 10 122, 11 77, 12 62.](images/com.apple.Charts/LineMarkSwift.LineMarkLineChart@2x.png)

### Plotting multiple lines

You can plot multiple lines in a chart either by explicitly specifying the `series` parameter in [`init(x:y:series:)`](/documentation/Charts/LineMark/init(x:y:series:)) or by applying the [`foregroundStyle(_:)`](/documentation/Charts/ChartContent/foregroundStyle(_:)) or [`lineStyle(_:)`](/documentation/Charts/ChartContent/lineStyle(_:)) modifiers.
Line marks with the same `series` value will always be rendered together as a single line.
When `series` is unspecified line marks with the same value plotted to foreground style and line style will be grouped together and plotted on their own line.
The example below plots one line per distinct value in `city` and colors each line based on the `city` it represents:

```swift
struct MonthlyHoursOfSunshine {
    var city: String
    var date: Date
    var hoursOfSunshine: Double

    init(city: String, month: Int, hoursOfSunshine: Double) {
        let calendar = Calendar.autoupdatingCurrent
        self.city = city
        self.date = calendar.date(from: DateComponents(year: 2020, month: month))!
        self.hoursOfSunshine = hoursOfSunshine
    }
}

var data: [MonthlyHoursOfSunshine] = [
    MonthlyHoursOfSunshine(city: "Seattle", month: 1, hoursOfSunshine: 74),
    MonthlyHoursOfSunshine(city: "Cupertino", month: 1, hoursOfSunshine: 196),
    // ...
    MonthlyHoursOfSunshine(city: "Seattle", month: 12, hoursOfSunshine: 62),
    MonthlyHoursOfSunshine(city: "Cupertino", month: 12, hoursOfSunshine: 199)
]

var body: some View {
    Chart(data) {
        LineMark(
            x: .value("Month", $0.date),
            y: .value("Hours of Sunshine", $0.hoursOfSunshine)
        )
        .foregroundStyle(by: .value("City", $0.city))
    }
}
```

![Multi-series line chart with date on x-axis and hours of sunshine on y-axis. Two lines showing 12 points representing hours of sunshine in a month for  a city. Seattle: 1 74, 2 99, 3 154, 4 201, 5 247, 6 234, 7 304, 8 248, 9 197, 10 122, 11 77, 12 62 and Cupertino: 1 196, 2 204, 3 253, 4 288, 5 311, 6 342, 7 360, 8 331, 9 300, 10 246, 11 212, 12 199.](images/com.apple.Charts/LineMarkSwift.LineMarkMultiSeriesLineChart@2x.png)

> Note: Colors are repeated if the number of series is greater than the total number of colors.

## Topics

### Creating a line mark

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

Creates a line mark.

[`init(x:y:series:)`](/documentation/Charts/LineMark/init(x:y:series:))

Creates a separate line for each unique value of series.

## Relationships

### Conforms To

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

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

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

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

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

---

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)