Contents

RuleMark

Chart content that represents data using a single horizontal or vertical rule.

Declaration

@MainActor @preconcurrency struct RuleMark

Overview

You can use RuleMark to plot a horizontal or vertical rule in your chart.

Show Range with Rule Marks

To create a horizontal line at a y position from xStart to xEnd you use the init(xStart:xEnd:y:) or init(xStart:xEnd:y:). To create a vertical line at an x position from yStart to yEnd you use init(x:yStart:yEnd:) or init(x:yStart:yEnd:). The example below uses the Pollen structure and the init(xStart:xEnd:y:) to map horizontal lines that span from the value of the startDate to the value of the endDate for x positions to a pollen source property’s y position:

struct Pollen {
    var source: String
    var startDate: Date
    var endDate: Date

    init(startMonth: Int, numMonths: Int, source: String) {
        self.source = source
        let calendar = Calendar.autoupdatingCurrent
        self.startDate = calendar.date(from: DateComponents(year: 2020, month: startMonth, day: 1))!
        self.endDate = calendar.date(byAdding: .month, value: numMonths, to: startDate)!
    }
}

var data: [Pollen] = [
    Pollen(startMonth: 1, numMonths: 9, source: "Trees"),
    Pollen(startMonth: 12, numMonths: 1, source: "Trees"),
    Pollen(startMonth: 3, numMonths: 8, source: "Grass"),
    Pollen(startMonth: 4, numMonths: 8, source: "Weeds")
]

var body: some View {
    Chart(data) {
        RuleMark(
            xStart: .value("Start Date", $0.startDate),
            xEnd: .value("End Date", $0.endDate),
            y: .value("Pollen Source", $0.source)
        )
    }
}

[Image]

Annotate a chart with rule mark

You can annotate a chart with horizontal or vertically spanning rules. This allows viewers to easily compare values over a range to a constant value. Use the init(xStart:xEnd:y:) initializer to represent a constant y value or init(x:yStart:yEnd:) for a constant x value. To span the plotting area of a chart with a line, omit the optional start and end parameters and plot a constant value. The example below results in a line that spans the chart horizontally at the y position of 9000:

struct DepartmentProfit {
    var department: String
    var profit: Double
}

var data: [DepartmentProfit] = [
    DepartmentProfit(department: "Production", profit: 15000),
    DepartmentProfit(department: "Marketing", profit: 8000),
    DepartmentProfit(department: "Finance", profit: 10000)
]

var body: some View {
    Chart
        ForEach(data) {
            BarMark(
                x: .value("Department", $0.department),
                y: .value("Profit", $0.profit)
            )
        }
        RuleMark(y: .value("Break Even Threshold", 9000))
            .foregroundStyle(.red)
    }
}

[Image]

RuleMark in Chart3D

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

The rule extends along the axis that you provide a range for, and is positioned at the single points you specify for the other two axes.

For example, the following Chart3D shows three rule marks. Each mark extends along one axis and is fixed at 0 on the other two.

Chart3D {
    // A rule that extends along the x-axis
    RuleMark(
        x: .value("x", -0.5..<0.5),
        y: .value("y", 0),
        z: .value("z", 0)
    )
    .foregroundStyle(.red)

    // A rule that extends along the y-axis
    RuleMark(
        x: .value("x", 0),
        y: .value("y", -0.5..<0.5),
        z: .value("z", 0)
    )
    .foregroundStyle(.green)

    // A rule that extends along the z-axis
    RuleMark(
        x: .value("x", 0),
        y: .value("y", 0),
        z: .value("z", -0.5..<0.5)
    )
    .foregroundStyle(.blue)
}

Topics

Initializers

See Also

Marks