I am working with Apple's Charts framework and displaying a bar chart using BarMark to visualize data points. However, I want to add a visible border or outline around each bar to make them stand out more. I successfully added a border around the entire chart, but how can I add a border to each individual bar?
Here's a simplified version of my code for context:
import Charts
Chart {
ForEach(matchs, id: \.day) { match in
BarMark(x: .value("day", match.day),
y: .value("point", match.point)
)
.opacity(1.0)
.foregroundStyle(.red)
.clipShape(RoundedRectangle(cornerRadius: 0))
}
}
.chartPlotStyle { content incontent.border(.white, width: 1)}
.frame(height: 250)
The solution is by using the annotation, and this is how it looks:
Chart {
ForEach(matchs, id: \.day) { match in
BarMark(x: .value("day", match.day),
y: .value("point", match.point)
)
.opacity(1.0)
.foregroundStyle(.red)
.clipShape(RoundedRectangle(cornerRadius: 0))
// Here is the addition of a border to the BarMark.
.annotation(position: .overlay) {
Rectangle()
.stroke(Color.white, lineWidth: 1)
.padding(-4)
}
}
}
.frame(height: 250)
// Here is the addition of a border to whol Chart
.chartPlotStyle { content in
content.border(.white, width: 1)
}
.padding(8)