Chart content that represents data using bars.
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:)``. 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)
)
}
}
```
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)
)
}
}
```
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 ``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))
}
```
You can use the optional `stacking:` parameter in the `BarMark` initializer to modify the stacking mechanism. See ``MarkStackingMethod`` for the stacking
options.
### 1D Bar Chart
To build a one dimensional chart, use one of the initializers that only requires a ``PlottableValue`` for one dimension, like
``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))
}
```
### Interval Bar Chart
Use `BarMark` to represent intervals by using the ``init(xStart:xEnd:y:height:)``, ``init(xStart:xEnd:y:height:stacking:)``,
``init(x:yStart:yEnd:width:)`` or ``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)
)
}
}
```
nonisolated init<X, Y>(x: PlottableValue<X>, y: PlottableValue<Y>, width: MarkDimension = .automatic, height: MarkDimension = .automatic, stacking: MarkStackingMethod = .standard) where X : Plottable, Y : Plottable
Creates a bar mark that plots values with x and y.
- Parameters:
- x: The value plotted with x.
- y: The value plotted with y.
- width: The bar width. If `width` is `nil`, the default bar size will be applied.
- height: The bar height. If `height` is `nil`, the default bar size will be applied.
- stacking: The stacking method for the bars with the same categorical/date values.
If `stacking` is `nil`, the bars will not be stacked.
### Discussion
Use this initializer to create a chart with one or more bars. For horizontal bars, plot categories or dates with y and numbers with x. For vertical bars,
plot categories or dates with x and numbers with y:
```swift
Chart(data) {
BarMark(
x: .value("Department", $0.department),
y: .value("Profit", $0.profit)
)
}
```
Creates a bar mark that plots a value on x with fixed y interval.
- Parameters:
- x: The value plotted with x.
- yStart: The y start position. If `yStart` is `nil` then the rectangle will start at the leading edge of the plotting area.
- yEnd: The y end position. If `yEnd` is `nil` then the rectangle will end at the trailing edge of the plotting area.
- width: The bar width. If `width` is `nil`, the default bar size will be applied.
- stacking: The stacking method for the bars with the same categorical/date values.
If `stacking` is `nil`, the bars will not be stacked.
### Discussion
Use this initializer to create a chart with a single horizontal bar:
```swift
Chart(data) {
BarMark(
x: .value("Profit", $0.profit)
)
.foregroundStyle(by: .value("Product Category", $0.productCategory))
}
```
nonisolated init<X, Y>(x: PlottableValue<X>, yStart: PlottableValue<Y>, yEnd: PlottableValue<Y>, width: MarkDimension = .automatic) where X : Plottable, Y : Plottable
Creates a bar mark that plots values with x and its y interval.
- Parameters:
- x: The value plotted with x.
- yStart: The value plotted with y start.
- yEnd: The value plotted with y end.
- width: The bar width. If `width` is `nil`, the default bar size will be applied.
### Discussion
Use this initializer to show vertical intervals for one or more categories:
```swift
Chart(data) {
BarMark(
x: .value("Job", $0.job),
yStart: .value("Start Time", $0.start),
yEnd: .value("End Time", $0.end)
)
}
```
nonisolated init<Y>(xStart: CGFloat? = nil, xEnd: CGFloat? = nil, yStart: PlottableValue<Y>, yEnd: PlottableValue<Y>) where Y : Plottable
Creates a bar mark with fixed x interval that plots values with its y interval.
- Parameters:
- xStart: The x start position. If `xStart` is `nil` then the rectangle will start at the leading edge of the plotting area.
- xEnd: The x end position. If `xStart` is `nil` then the rectangle will end at the trailing edge of the plotting area.
- yStart: The value plotted to y start.
- yEnd: The value plotted to y end.
### Discussion
Use this initializer to show vertical intervals for one category:
```swift
Chart(data) {
BarMark(
yStart: .value("Start Time", $0.start),
yEnd: .value("End Time", $0.end)
)
}
```
nonisolated init<X>(xStart: PlottableValue<X>, xEnd: PlottableValue<X>, yStart: CGFloat? = nil, yEnd: CGFloat? = nil) where X : Plottable
Creates a bar mark that plots values with its x interval and fixed y position.
- Parameters:
- xStart: The value plotted with x start.
- xEnd: The value plotted with x end.
- y: The y position. If `y` is `nil`, the bar will be centered vertically by default.
- height: The bar height. If `height` is `nil`, the default bar size will be applied.
### Discussion
Use this initializer to show horizontal intervals for one category:
```swift
Chart(data) {
BarMark(
xStart: .value("Start Time", $0.start),
xEnd: .value("End Time", $0.end)
)
}
```
Creates a bar mark that plots values on y with fixed x interval.
- Parameters:
- xStart: The x start position. If `xStart` is `nil` then the rectangle will start at the leading edge of the plotting area.
- xEnd: The x end position. If `xStart` is `nil` then the rectangle will end at the trailing edge of the plotting area.
- y: The value plotted with y.
- height: The bar height. If `height` is `nil`, the default bar size will be applied.
- stacking: The stacking method for the bars with the same categorical/date values.
If `stacking` is `nil`, the bars will not be stacked.
### Discussion
Use this initializer to create a chart with a single vertical bar:
```swift
Chart(data) {
BarMark(
y: .value("Profit", $0.profit)
)
.foregroundStyle(by: .value("Product Category", $0.productCategory))
}
```
nonisolated init<X, Y>(xStart: PlottableValue<X>, xEnd: PlottableValue<X>, y: PlottableValue<Y>, height: MarkDimension = .automatic) where X : Plottable, Y : Plottable
Creates a bar mark that plots values with its x interval and y.
- Parameters:
- xStart: The value plotted with x start.
- xEnd: The value plotted with x end.
- y: The value plotted with y.
- height: The bar height. If `height` is `nil`, the default bar size will be applied.
### Discussion
Use this initializer to show horizontal intervals for one or more categories:
```swift
Chart(data) {
BarMark(
xStart: .value("Start Time", $0.start),
xEnd: .value("End Time", $0.end),
y: .value("Job", $0.job)
)
}
```
