Beautiful LineChart in SwiftUI

Quickly add powerful code to your app

Alex Fine
3 min readOct 17, 2020
The apps you’ll have created by the end of this tutorial 😀

Context

You can find the repo here.

Get Started

First, install iLineChart with the swift package manager.

https://github.com/AlexFine/iLineChart.git

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

Next, add the following to your view:

Starter Example Code
Starter Example App

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.

Medium Example Code
Medium Example App

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:

Stocks Example Code
Stocks Example App

Dark Mode

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

@Environment(\.colorScheme) var colorScheme: ColorScheme

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.

Dark Theme Example Code
Dark Theme Example App

If you’re interested in what’s under the hood, I recommend learning more at https://github.com/AlexFine/iLineChart.

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://github.com/AlexFine/iLineChart

--

--