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

# BarMark

Chart content that represents data using bars.

```
@MainActor @preconcurrency struct BarMark
```

## Overview

You can create different kinds of bar charts using the `BarMark` chart content. To create a simple vertical bar chart that plots categories with x positions and numbers
with y positions, use [`init(x:y:width:height:stacking:)`](/documentation/Charts/BarMark/init(x:y:width:height:stacking:)). For example, you can display profit by department:

```swift
struct Profit {
    let department: String
    let profit: Double
}

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

var body: some View {
    Chart(data) {
        BarMark(
            x: .value("Department", $0.department),
            y: .value("Profit", $0.profit)
        )
    }
}
```

![Vertical bar chart with x-axis showing department categories Production, Marketing, Finance and with y-axis ranging from 0 to 15000. There are 3 bars: Production 15000, Marketing 8000, Finance 10000.](images/com.apple.Charts/BarMarkSwift.BarMarkBarChart@2x.png)

Swift Charts provides several other initializers for `BarMark`. Below are a few more examples using them. For a full list of initializers see the topic section.

### Stacked Bar Chart

`BarkMark` automatically stacks content when more than one bar maps to the same location. You can see this if you split the profit data up by category:

```swift
struct ProfitByCategory {
    let department: String
    let profit: Double
    let productCategory: String
}

let data: [ProfitByCategory] = [
    ProfitByCategory(department: "Production", profit: 4000, productCategory: "Gizmos"),
    ProfitByCategory(department: "Production", profit: 5000, productCategory: "Gadgets"),
    ProfitByCategory(department: "Production", profit: 6000, productCategory: "Widgets"),
    ProfitByCategory(department: "Marketing", profit: 2000, productCategory: "Gizmos"),
    ProfitByCategory(department: "Marketing", profit: 1000, productCategory: "Gadgets"),
    ProfitByCategory(department: "Marketing", profit: 5000, productCategory: "Widgets"),
    ProfitByCategory(department: "Finance", profit: 2000, productCategory: "Gizmos"),
    ProfitByCategory(department: "Finance", profit: 3000, productCategory: "Gadgets"),
    ProfitByCategory(department: "Finance", profit: 5000, productCategory: "Widgets")
]

var body: some View {
    Chart(data) {
        BarMark(
            x: .value("Category", $0.department),
            y: .value("Profit", $0.profit)
        )
    }
}
```

![Vertical bar chart with x-axis showing department categories Production, Marketing, Finance with stacked product categories Gizmos, Gadgets, Widgets, and with y-axis ranging from 0 to 20,000. There are 3 bars: Production 15000, Marketing 8000, and Finance 10000.](images/com.apple.Charts/BarMarkSwift.BarMarkStackedBarChart@2x.png)

This results in a chart that looks identical to the chart seen in the Overview section because the bars with the same department category are stacked on top of
each other. To differentiate the product categories, add a [`foregroundStyle(by:)`](/documentation/Charts/ChartContent/foregroundStyle(by:)) modifer that specifies a visual encoding for
the `productCategory`:

```swift
Chart(data) {
    BarMark(
        x: .value("Category", $0.department),
        y: .value("Profit", $0.profit)
    )
    .foregroundStyle(by: .value("Product Category", $0.productCategory))
}
```

![Vertical bar chart with x-axis showing department categories Production, Marketing, Finance with stacked product categories Gizmos, Gadgets, Widgets, and with y-axis ranging from 0 to 15000. There are 3 bars: Production 15,000: Gizmos 4000, Gadgets 5000, and Widgets 6000, Marketing 8000: Gizmos 2000, Gadgets 1000, and Widgets 5000, Finance 10000: Gizmos 2000, Gadgets 3000, and Widgets 500. Legend showing the color mapped to a product category.](images/com.apple.Charts/BarMarkSwift.BarMarkStackedBarChartWithForegroundColor@2x.png)

You can use the optional `stacking:` parameter in the `BarMark` initializer to modify the stacking mechanism. See [`MarkStackingMethod`](/documentation/Charts/MarkStackingMethod) for the stacking
options.

### 1D Bar Chart

To build a one dimensional chart, use one of the initializers that only requires a [`PlottableValue`](/documentation/Charts/PlottableValue) for one dimension, like
[`init(x:yStart:yEnd:width:stacking:)`](/documentation/Charts/BarMark/init(x:yStart:yEnd:width:stacking:)) for plotting with x. The example below reuses the data
from the previous example to get the production department values:

```swift
Chart(data) { // Get the Production values.
    BarMark(
        x: .value("Profit", $0.profit)
    )
    .foregroundStyle(by: .value("Product Category", $0.productCategory))
}
```

![Horizontal bar chart with one bar on the x-axis showing profit ranging from 0 to 15000 with stacked categoreis Gizmos, Gadgets and Widgets. Legend showing the color mapped to a product category.](images/com.apple.Charts/BarMarkSwift.BarMarkHorizontalStacked1DBarChartWithForegroundColor@2x.png)

### Interval Bar Chart

Use `BarMark` to represent intervals by using the [`init(xStart:xEnd:y:height:)`](/documentation/Charts/BarMark/init(xStart:xEnd:y:height:)), [`init(xStart:xEnd:y:height:stacking:)`](/documentation/Charts/BarMark/init(xStart:xEnd:y:height:stacking:)),
[`init(x:yStart:yEnd:width:)`](/documentation/Charts/BarMark/init(x:yStart:yEnd:width:)) or  [`init(x:yStart:yEnd:width:stacking:)`](/documentation/Charts/BarMark/init(x:yStart:yEnd:width:stacking:)). The example below displays a Gantt chart by
plotting the `start` and `end` properties to x positions and the `task` property to y positions:

```swift
struct Job {
    let job: String
    let start: Double
    let end: Double
}

let data: [Job] = [
    Job(job: "Job 1", start: 0, end: 15),
    Job(job: "Job 2", start: 5, end: 25),
    Job(job: "Job 1", start: 20, end: 35),
    Job(job: "Job 1", start: 40, end: 55),
    Job(job: "Job 2", start: 30, end: 60),
    Job(job: "Job 2", start: 30, end: 60)
]

var body: some View {
    Chart(data) {
        BarMark(
            xStart: .value("Start Time", $0.start),
            xEnd: .value("End Time", $0.end),
            y: .value("Job", $0.job)
        )
    }
}
```

![Horizontal bar chart with x-axis showing start and end time and y-axis showing task name. It has 5 bars, Task 1 range 0 to 15, range 20 to 35, and range 40 to 55, and Task 2 range 5 to 25 and range 30 to 60 task.](images/com.apple.Charts/BarMarkSwift.BarMarkHorizontalIntervalBarChart@2x.png)

## Topics

### Creating a bar mark

[`init(x:yStart:yEnd:width:)`](/documentation/Charts/BarMark/init(x:yStart:yEnd:width:))

Creates a bar mark that plots values with x and its y interval.

[`init(xStart:xEnd:y:height:)`](/documentation/Charts/BarMark/init(xStart:xEnd:y:height:))

Creates a bar mark that plots values with its x interval and y.

[`init(x:y:width:height:stacking:)`](/documentation/Charts/BarMark/init(x:y:width:height:stacking:))

Creates a bar mark that plots values with x and y.

[`init(xStart:xEnd:yStart:yEnd:)`](/documentation/Charts/BarMark/init(xStart:xEnd:yStart:yEnd:)-98wo9)

Creates a bar mark that plots values with its x interval and fixed y position.

[`init(xStart:xEnd:yStart:yEnd:)`](/documentation/Charts/BarMark/init(xStart:xEnd:yStart:yEnd:)-7541n)

Creates a bar mark with fixed x interval that plots values with its y interval.

[`init(x:y:width:height:stacking:)`](/documentation/Charts/BarMark/init(x:y:width:height:stacking:))

Creates a bar mark that plots values with x and y.

[`init(x:yStart:yEnd:width:stacking:)`](/documentation/Charts/BarMark/init(x:yStart:yEnd:width:stacking:))

Creates a bar mark that plots a value on x with fixed y interval.

[`init(xStart:xEnd:y:height:stacking:)`](/documentation/Charts/BarMark/init(xStart:xEnd:y:height:stacking:))

Creates a bar mark that plots values on y with fixed x interval.

## Relationships

### Conforms To

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

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

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

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

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

---

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)