SwiftUI Bar Chart with Customizations | Swift Charts

[@seanallen]

My iOS Developer Courses - seanallen.teachable.com

[@ordazgustavo]

My solution for fixing the alignment and missing label in 17:21 is: AxisMarks(values: .stride(by: .month, count: 1)) { AxisValueLabel(format: .dateTime.month(.narrow), centered: true) }

[@FloWritesCode]

Great overview! This framework can be a bit overwhelming in the beginning, since it's so customisable.

[@seanallen]

Indeed. There is A LOT there. I'm excited to dive into more.

[@Neha-oo6jr]

Hi Sean, I have tried these two solution for that last label invisibility issue on x Axis 1. AxisValueLable(format: .dateTime.month(.narrow), multipleAlignment: .centre), 2. AxisValueLable(format: .dateTime.month(.narrow), horizontalSpacing: 10)

[@jimscubicle]

The key here is the horizontal spacing. Unfortunately, the spacing is slightly different to center the labels for devices of different widths, or for different orientations.

[@TheseEyesSeeDarknessClearly7]

I wish there was a way to easily press the chart and see the exact number for each month. For when the rough estimate won’t cut it

[@seanallen]

This functionality is built into Swift Charts. As I say in the video, this is a pretty deep framework with a lot of customization possibilities.

[@andremoi88]

Great video! Do you have any plans to offer a course on Swift charts? I’m struggling to implement tooltips on line charts (display values on touch) and have not found much by way of guidance. Thanks for all the great videos.

[@seanallen]

I don't have plans for a dedicated course on it. But I plan on implementing charts into the apps I build for larger courses. So it'll be sort of a sub-topic - but won't be dedicated to everything to know about charts.

[@MarkFilterDeveloper]

Awesome tutorial. Another way you can get the dashed lines in the Legend is by using Path { }. Not sure if this will keep the formatting when I post it. This way, the dashed line will be displayed matching the RuleMark, if you make it dashed like you do in the video. HStack { Path { path in path.move(to: CGPoint(x: 0, y: 7)) path.addLine(to: CGPoint(x: 35, y: 7)) } .stroke(Color.secondary, style: StrokeStyle(lineWidth: 3, lineCap: .round, lineJoin: .round, dash: [3, 10])) .frame(width: 50) Text("Monthly Goal") .foregroundStyle(Color.secondary) .font(.caption) Spacer() }

[@WestCoastAce27]

😲 Longtime Objective-C/XCode dev - this may be the video that makes me learn Swift. That’s ridiculously easier. Great job as always.

[@KileeKoderLLC]

Do you have a video or can you point me to one that does it by quarter and not month. 1st quarter Jan 1/2024 - Mar 31/2024 2nd quarter Apr 1/2024 - Jun 30/2024 3rd quarter July 1/2024 - present 4th quarter Oct 1/2023 - Dec 31/2023

[@chezchezchezchez]

How do you make more than one chart inside the same ForEach?

[@comexbackkid]

Sean this is dope thank you! By chance, do you know if there is a way to manually set the X Axis scale instead of it just going by the data provided? For example if a chart is displaying monthly values for the current year we're in, & it's only February, the chart would look silly just having two massive bar marks representing January & February. Thanks!

[@seanallen]

Hey Chris, yes, I believe you can do this. When you create a custom XAxis (like we do later in this video) you have the ability to pass in a new set of data for that axis. Working with that is how you could recreate this. I don't have the exact code for you, but based on my initial learnings (remember, this is a brand new framework), I believe this is possible. Mainly because your example is such a common use case that it would be a huge oversight for the framework to not support that.

[@TheFistRZ]

Very informative video! I was wondering if there is a way to make the charts swipable like they are in Apple's Health app? I have tried to find how to do this but I can't seem to find anyone doing it.

[@seanallen]

I believe there is. However, Swift Charts is a brand new framework and I'm only just starting to learn it. Because it's so new, that's why you haven't seen too many deep dives into everything it can do.

[@TheFistRZ]

@@seanallen Fantastic! Looking forward to future videos!

[@harold_davis]

🚀 Love it just started playing with this for an app. Great video! 🤘🏾

[@seanallen]

It's an awesome framework, isn't it?

[@harold_davis]

@@seanallen It is excellent my intimidation about business ideas flew away when I checked it it.

[@stammix]

hi Sean, are Charts a better way to create a weekly calendar than Grids are? with all the possible customizations you show and tease, I imagine a lot of usefull elements for building up a structure like calendars. thanks

[@s.tunahanustuntepe2966]

Can't find 'Chart' in scope I'm getting an error I wonder how can I solve it?

[@seanallen]

You need to be supporting a minimum of iOS 16 to use Charts. If you are supporting iOS 15, Xcode won't be able to find Charts.

[@s.tunahanustuntepe2966]

@@seanallen so where can I upgrade to iOS 16 or. Xcode I'm new here

[@seanallen]

It’s tough to describe in the KZbin comments without visuals. If you Google “how to change minimum ios target in Xcode” that should help.

[@s.tunahanustuntepe2966]

@@seanallen I upgraded to Xcode 14 and chose IOS 16, but I'm getting a wine Can't find "Chart" in scope error. I made Import Charts.I wonder what else could be the problem?

[@s.tunahanustuntepe2966]

@@seanallen I did what you said, but the same problem continues

[@sani21OK]

Thanks

[@seanallen]

Happy to help :)

[@jsedlacekjr]

Instead of doing the workaround of rotating a diagonal line you could just use a RoundedRectangle

[@seanallen]

Yup. Many different ways to do things in SwiftUI

[@mkhasson97]

Brilliant ❤

[@seanallen]

Thanks Mohammad!

[@isaacl7782]

thank sir

[@seanallen]

Happy to help!

[@sphericalwave]

🥷