Chart content that represents data using a sequence of connected line segments.
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:)``:
```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)
)
}
}
```
### Plotting multiple lines
You can plot multiple lines in a chart either by explicitly specifying the `series` parameter in ``init(x:y:series:)`` or by applying the ``ChartContent/foregroundStyle(_:)`` or ``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))
}
}
```
> Note: Colors are repeated if the number of series is greater than the total number of colors.
nonisolated init<X, Y, S>(x: PlottableValue<X>, y: PlottableValue<Y>, series: PlottableValue<S>) where X : Plottable, Y : Plottable, S : Plottable
Creates a separate line for each unique value of series.
- Parameters:
- x: The value plotted with x.
- y: The value plotted with y.
- series: The value with which to split the line series by.
### Discussion
Use this initializer to create a multi-line chart from a single data source.
```swift
Chart(sunshineData) {
LineMark(
x: .value("Month", $0.date),
y: .value("Hours of Sunshine", $0.hoursOfSunshine)
)
.foregroundStyle(by: .value("City", $0.city))
}
```
nonisolated init<X, Y>(x: PlottableValue<X>, y: PlottableValue<Y>) where X : Plottable, Y : Plottable
Creates a line mark.
- Parameters:
- x: The value plotted with x.
- y: The value plotted with y.
### Discussion
Use this initializer to create a chart with a single line.
```swift
Chart(sunshineData) {
LineMark(
x: .value("Month", $0.date),
y: .value("Hours of Sunshine", $0.hoursOfSunshine)
)
}
```
