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 change app tint color (New SwiftUI life cycle app)?
- Applying different LabelStyle conditionally fails
- SwiftUI view centring behaviour on using new frame modifier
- Create a SwiftUI view that takes 3 other views as parameters two which are optional and one is required
- How to Resolve Localization Issues in Swift Packages when working with Strings with SwiftUI?
- Dictionary causes weird errors swift/swiftui
- How can I define a custom coordinate system and ensure that other views maintain their positions relative to it?
- Capture @State in closure
- Popover not initially showing text
- How to fix DragGesture() does not move smoothly when I use onTapGesture together
- How to keep the ScrollView height to the minimum necessary in SwiftUI?
- Any SwiftUI Button equivalent to UIKit's "touch down", i.e. activate button when your finger touches?
- No exact matches in call to macro 'Preview' when trying to pre-select a radio button
- How to prevent text truncation when inside a ViewThatFits and with maxWidth set?
- How can I create a new folder on macOS using a shell command in SwiftUI macOS while ensuring compatibility with the App Sandbox and using bookmarks?
- How to observe for modifier key pressed (e.g. option, shift) with NSNotification in SwiftUI macOS project?
- How to share an object between AppDelegate and SceneDelegate
- How do you create a rotational matchedGeometryEffect in SwiftUI?
- Why is there a weird, unexpected animation on onAppear in macOS SwiftUI?
- How to change the size of onHover background of a button?
- How to add text in between the NavigationLink title and the arrow / disclosure indicator - SwiftUI
- Why doesn't list selection work when my list is from a DB?
- ScrollView affects navbar color when scrolling started
- SwiftUI - TextField - Clear value of type Double on focus, restore on deselect
- How to embed an SFSymbol into an AttributedString in SwiftUI
- How to Add custom init in SwiftUI View extension
- Stereo view using RealityView in iOS 18
- Make a VStack fill the width of the screen in SwiftUI
- SwiftUI. How to change the placeholder color of the TextField?
- Cannot convert value of type 'Range<Int>' to expected argument type 'Binding<C>'