swiftuichartsbar-chart
How to show info view on top of specific bar in a grouped bar chart in SwiftUI using Swift Chart framework
I am able to show info view on tap of single bar on top of that as showing below -
Now I am trying to show info view on tap of specific bar in grouped bar chart as below -
When I am trying to implement it I can only figure out to get group selection and showing info view from middle/center of group bar as below - I want to get specific bar info in top info view on selection.
import Charts
import SwiftUI
struct Workout: Identifiable {
let id = UUID()
let day: String
let minutes: Int
}
extension Workout {
static let walkWorkout: [Workout] = [
.init(day: NSLocalizedString("mon", comment: ""), minutes: 23),
.init(day: "Tue", minutes: 35),
.init(day: "Wed", minutes: 55),
.init(day: "Thu", minutes: 30),
.init(day: "Fri", minutes: 15),
.init(day: "Sat", minutes: 65),
.init(day: "Sun", minutes: 81),
]
static let runWorkout: [Workout] = [
.init(day: NSLocalizedString("mon", comment: ""), minutes: 16),
.init(day: "Tue", minutes: 12),
.init(day: "Wed", minutes: 55),
.init(day: "Thu", minutes: 34),
.init(day: "Fri", minutes: 22),
.init(day: "Sat", minutes: 43),
.init(day: "Sun", minutes: 90),
]
}
struct GroupedBarChartWithStartYAxisTap: View {
@State private var selectedElement: Workout? = nil
@Environment(\.layoutDirection) var layoutDirection
var body: some View {
List {
VStack(alignment: .leading) {
VStack(alignment: .leading) {
Text("Day and Minutes")
.font(.callout)
.foregroundStyle(.secondary)
Text("\(hours.first?.date ?? Date(), format: .dateTime)")
.font(.title2.bold())
}
.opacity(selectedElement == nil ? 1 : 0)
InteractiveGroupedBarChartWithStartYAxisTap(selectedElement: $selectedElement)
.frame(height: 600)
}
.chartBackground { proxy in
ZStack(alignment: .topLeading) {
GeometryReader { nthGeoItem in
if let selectedElement = selectedElement {
// let dateInterval = Calendar.current.dateInterval(of: .hour, for: selectedElement.date)!
let startPositionX1 = proxy.position(forX: selectedElement.day) ?? 0
let startPositionX2 = proxy.position(forX: selectedElement.day) ?? 0
let midStartPositionX = (startPositionX1 + startPositionX2) / 2 + nthGeoItem[proxy.plotAreaFrame].origin.x
let lineX = layoutDirection == .rightToLeft ? nthGeoItem.size.width - midStartPositionX : midStartPositionX
let lineHeight = nthGeoItem[proxy.plotAreaFrame].maxY
let boxWidth: CGFloat = 150
let boxOffset = max(0, min(nthGeoItem.size.width - boxWidth, lineX - boxWidth / 2))
Rectangle()
.fill(.quaternary)
.frame(width: 2, height: lineHeight)
.position(x: lineX, y: lineHeight / 2)
VStack(alignment: .leading) {
Text("\(selectedElement.id)")
.font(.callout)
.foregroundStyle(.secondary)
Text("\(selectedElement.day)\n\(selectedElement.minutes)")
.font(.body.bold())
.foregroundColor(.primary)
}
.frame(width: boxWidth, alignment: .leading)
.background {
ZStack {
RoundedRectangle(cornerRadius: 8)
.fill(.background)
RoundedRectangle(cornerRadius: 8)
.fill(.quaternary.opacity(0.7))
}
.padding([.leading, .trailing], -8)
.padding([.top, .bottom], -4)
}
.offset(x: boxOffset)
}
}
}
}
.listRowSeparator(.hidden)
}
.listStyle(.plain)
.navigationBarTitle("Interactive Lollipop", displayMode: .inline)
}
}
struct InteractiveGroupedBarChartWithStartYAxisTap: View {
let workoutData = [
(workoutType: "Walk", data: Workout.walkWorkout),
(workoutType: "Run", data: Workout.runWorkout)
]
@Binding var selectedElement: Workout?
func findElement(location: CGPoint, proxy: ChartProxy, geometry: GeometryProxy) -> Workout? {
let relativeXPosition = location.x - geometry[proxy.plotAreaFrame].origin.x
let relativeYPosition = location.y - geometry[proxy.plotAreaFrame].origin.y
if let day = proxy.value(atX: relativeXPosition, as: String.self), let minutes = proxy.value(atY: relativeYPosition, as: Int.self) {
var workout: Workout? = nil
for salesDataIndex in workoutData.indices {
let nthSalesDataDistance = workoutData[salesDataIndex].data
workout = nthSalesDataDistance.filter { $0.day == day/* && $0.minutes == minutes */}.first
}
if workout != nil {
return workout
}
}
return nil
}
var body: some View {
VStack {
Chart {
ForEach(workoutData, id: \.workoutType) { element in
ForEach(element.data) {
BarMark(x: .value("Day", $0.day), y: .value("Workout(in minutes)", $0.minutes))
}
.foregroundStyle(by: .value("Workout(type)", element.workoutType))
.position(by: .value("Workout(type)", element.workoutType))
}
}
.chartYAxis {
AxisMarks(position: .leading, values: Array(stride(from: 0, through: 100, by: 10))) {
axis in
AxisTick()
AxisGridLine()
AxisValueLabel("\((axis.index * 10))", centered: false)
}
}
.chartOverlay { proxy in
GeometryReader { nthGeometryItem in
Rectangle().fill(.clear).contentShape(Rectangle())
.gesture(
SpatialTapGesture()
.onEnded { value in
let element = findElement(location: value.location, proxy: proxy, geometry: nthGeometryItem)
if selectedElement?.id == element?.id {
// If tapping the same element, clear the selection.
selectedElement = nil
} else {
selectedElement = element
}
}
.exclusively(
before: DragGesture()
.onChanged { value in
selectedElement = findElement(location: value.location, proxy: proxy, geometry: nthGeometryItem)
}
)
)
}
}
}
.padding()
}
}
Solution
You can manually calculate where the bars are by setting the span of the groups.
.position(by: .value("Workout(type)", element.workoutType), span: 40)
Here I have set the group spans to 40. This means that the centre of the left/right bar will be 10 points (i.e. group span divided by 4) left/right of the centre of the group.
Before we do anything else, it would be very useful to be able to easily identify what kind of workout (walk or run) a Workout is.
struct Workout: Identifiable, Hashable {
let id = UUID()
let day: String
let minutes: Int
let kind: Kind
enum Kind {
case walk, run
}
}
In findElement, see if location.x is left or right of the group's centre X.
func findElement(location: CGPoint, proxy: ChartProxy, geometry: GeometryProxy) -> Workout? {
guard let frame = proxy.plotFrame,
let x = proxy.value(atX: location.x - geometry[frame].origin.x, as: String.self),
let xRange = proxy.positionRange(forX: x) else { return nil }
let midPoint = (xRange.lowerBound + xRange.upperBound) / 2
return if location.x - geometry[frame].origin.x < midPoint { // walk
workoutData[0].data.first { $0.day == x }
} else { // run
workoutData[1].data.first { $0.day == x }
}
}
In chartBackground, check the kind of the workout, and move it left/right by 10 points.
.chartBackground { proxy in
ZStack (alignment: .topLeading) {
GeometryReader { geo in
if let selectedElement, let frame = proxy.plotFrame, let x = proxy.position(forX: selectedElement.day) {
let offset: CGFloat = selectedElement.kind == .run ? 10 : -10
let height = geo[frame].height
Rectangle()
.fill(.quaternary)
.frame(width: 2, height: height)
.position(x: x + offset + geo[frame].minX, y: height / 2)
// the rectangle containing the info goes here...
}
}
}
}
Here is a minimal reproducible example. Handling right-to-left layout is left as an exercise.
struct Workout: Identifiable, Hashable {
let id = UUID()
let day: String
let minutes: Int
let kind: Kind
enum Kind {
case walk, run
}
}
extension Workout {
static let walkWorkout: [Workout] = [
.init(day: NSLocalizedString("mon", comment: ""), minutes: 23, kind: .walk),
.init(day: "Tue", minutes: 35, kind: .walk),
.init(day: "Wed", minutes: 55, kind: .walk),
.init(day: "Thu", minutes: 30, kind: .walk),
.init(day: "Fri", minutes: 15, kind: .walk),
.init(day: "Sat", minutes: 65, kind: .walk),
.init(day: "Sun", minutes: 81, kind: .walk),
]
static let runWorkout: [Workout] = [
.init(day: NSLocalizedString("mon", comment: ""), minutes: 16, kind: .run),
.init(day: "Tue", minutes: 12, kind: .run),
.init(day: "Wed", minutes: 55, kind: .run),
.init(day: "Thu", minutes: 34, kind: .run),
.init(day: "Fri", minutes: 22, kind: .run),
.init(day: "Sat", minutes: 43, kind: .run),
.init(day: "Sun", minutes: 90, kind: .run),
]
}
let workoutData = [
(workoutType: "Walk", data: Workout.walkWorkout),
(workoutType: "Run", data: Workout.runWorkout)
]
struct ContentView: View {
@State var selectedElement: Workout?
func findElement(location: CGPoint, proxy: ChartProxy, geometry: GeometryProxy) -> Workout? {
guard let frame = proxy.plotFrame,
let x = proxy.value(atX: location.x - geometry[frame].origin.x, as: String.self),
let xRange = proxy.positionRange(forX: x) else { return nil }
let midPoint = (xRange.lowerBound + xRange.upperBound) / 2
return if location.x - geometry[frame].origin.x < midPoint { // walk
workoutData[0].data.first { $0.day == x }
} else { // run
workoutData[1].data.first { $0.day == x }
}
}
var body: some View {
Chart {
ForEach(workoutData, id: \.workoutType) { element in
ForEach(element.data) { workout in
BarMark(
x: .value("Day", workout.day),
y: .value("Workout(in minutes)", workout.minutes)
)
}
.foregroundStyle(by: .value("Workout(type)", element.workoutType))
.position(by: .value("Workout(type)", element.workoutType), span: 40)
}
}
.chartYAxis {
AxisMarks(position: .leading, values: Array(stride(from: 0, through: 100, by: 10))) {
axis in
AxisTick()
AxisGridLine()
AxisValueLabel("\((axis.index * 10))", centered: false)
}
}
.chartBackground { proxy in
ZStack (alignment: .topLeading) {
GeometryReader { geo in
if let selectedElement, let frame = proxy.plotFrame, let x = proxy.position(forX: selectedElement.day) {
let offset: CGFloat = selectedElement.kind == .run ? 10 : -10
let height = geo[frame].height
Rectangle()
.fill(.quaternary)
.frame(width: 2, height: height)
.position(x: x + offset + geo[frame].minX, y: height / 2)
VStack(alignment: .leading) {
Text("\(selectedElement.id)")
.font(.callout)
.foregroundStyle(.secondary)
Text("\(selectedElement.day)\n\(selectedElement.minutes)")
.font(.body.bold())
.foregroundColor(.primary)
}
.frame(width: 150, alignment: .leading)
.background {
ZStack {
RoundedRectangle(cornerRadius: 8)
.fill(.background)
RoundedRectangle(cornerRadius: 8)
.fill(.quaternary.opacity(0.7))
}
.padding([.leading, .trailing], -8)
.padding([.top, .bottom], -4)
}
.offset(x: min(x + offset + geo[frame].minX, geo[frame].maxX - 150))
}
}
}
}
.chartOverlay { proxy in
GeometryReader { nthGeometryItem in
Rectangle().fill(.clear).contentShape(Rectangle())
.gesture(
SpatialTapGesture()
.onEnded { value in
let element = findElement(location: value.location, proxy: proxy, geometry: nthGeometryItem)
if selectedElement?.id == element?.id {
selectedElement = nil
} else {
selectedElement = element
}
}
.exclusively(
before: DragGesture()
.onChanged { value in
selectedElement = findElement(location: value.location, proxy: proxy, geometry: nthGeometryItem)
}
)
)
}
}
.padding()
}
}
- How to animate view movement without using offset?
- Get Map Annotations in center of screen Swift UI
- SwiftUI App resets SKScene after becoming active again
- SwiftUI on MacOS. - Opening a new Window
- How to apply "acceptsFirstMouse" for app build with SwiftUI?
- I need to fix SwiftUI
- How to change SwiftUI TabView dot indicator shape?
- Combine spring animation with easeInOut in SwiftUI
- Swiftui: Overlay - either rounded corners or
- How can I overlay multiple views in SwiftUI so that they appear above the main content view
- How to use PhaseAnimator to create animations that doesn't loop back to the first phase?
- Issue with observing SwiftData model and UndoManager
- How do I create a slider in SwiftUI for an Int-type property?
- SwiftUI Optional header and footer in Section, opaque return type error
- Child view not refreshing for changes on SwiftData model
- Optional @ViewBuilder closure
- iPhone keyboard dissapear and appear again when switching between fields with onTapGesture(hideKeyboard)
- How to mock #Preview with a view expecting an Error as parameter?
- SwiftUI MenuBarExtra icon and dark mode
- Is there a list of absolutely EVERY modifier that is available for SwiftUI?
- Circular Image in SwiftUI Menu
- Changing @State variable does not update the View in SwiftUI
- SwiftUI Countdowntimer bouncing (Timer changes its size when the time runs out)
- Remove "more" button from navigation view for custom tab bar with 5+ items
- How to change the circle color of Slider of SwiftUI?
- How to fix map annotation selection issues in iOS 17?
- SwiftUI contentView doesn't rerender after Binding object has changed its State variable
- Swift/Golang API: Issue fetching from DB upon view populating
- How to create whole screen overlay in MacOS with Swift?
- Cannot drag again after dropping an element