247 Followers
·
Follow

Beautiful LineChart in SwiftUI

Quickly add powerful code to your app

Image for post
Image for post
The apps you’ll have created by the end of this tutorial 😀

Context

This LineChart tutorial is for an iSwiftUI package. Learn more about iSwiftUI here.

Get Started

First, install iLineChart with the swift package manager.

Unfamiliar with the swift package manager 😕? No problem! Find detailed instructions here 😃!

Next, add the following to your view:

Done. Your example is up & running. Simple.

Customize

Now that your basic app is running, customize your line chart with the built in initializers.

For example, if you want your graph to have a title, or you want to display statistics about the data in your graph, you can use the following.

Advanced

Now what if your app requires more customization? iLineChart supports 21 unique parameters.

While you can find the entire list of parameters here, this article will highlight a few of the most relevant ones. And more importantly, it highlights how you can use those parameters to robustly customize your chart.

Stocks App: To build a modern & sleek stocks app you can start by setting your default style to tertiary. From there, you can alter the graph from having curved lines to straight lines. Finally, make sure you display chart statistics in order for users to interact with the data. Try the following code block for your stocks app:

Dark Mode

Finally, if you want your app to support dark mode you can use

to record the current color scheme.

While dark mode is not natively supported in iLineChart, you can easily create a dark mode version of your chart and conditionally display it given the user’s settings.

If you’re interested in what’s under the hood, I recommend learning more at https://iswiftui.com/charts.html.

Conclusion

Please comment if you have any questions! The original developer of this open source library is @AppPear on Github and he deserves credit for the heavy lifting!

Resources

iLineChart Documentation: https://iswiftui.com/charts.html

iSwiftUI Home: iSwiftui.com

Written by

Love to code. SwiftUI developer. Prev. studied Math @ Stanford.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store