Simplifying IT, Empowering Businesses

Swift Charts are a new SwiftUI framework that allows the creation of customizable charts that can represent your data in a visual format. This is big for developers using SwiftUI for representing their data. Today, our DEV IT engineers will go over the framework and how it can be used in your iOS app development process.

The Release of Swift Charts

Apple announced the release of Swift Charts at WWDC 2022 and it has shaken up the world of iOS development ever since. The way the charts are able to represent and transform data into easily understandable charts is simply incredible.

One thing to note is that Swift Charts are available from Xcode 14.0 onwards which means you would likely need to update your software before you can use these charts.

Let’s first discuss Charts:

As you may already know, charts are visual representations of data that make it easier for humans to understand complex data via graphics. Different types of data may need different types of charts for representation.

Charts make it easier to explain and compare various kinds of data such as Sales, Profits, market data, and monthly, quarterly, and annual data.

Swift Charts:

What separates Swift Charts from generic charts and makes them useful for most developers is the fact they work with minimal code. Using Swift Charts, you can represent your code-related data in a variety of charts that make it easier to coordinate with your team.

These charts also support various features such as accessibility, localization, and animation, and can be used on a variety of platforms such as iOS, iPadOS, watchOS, macOS, and tvOS.

Swift chart Implementation steps:

Now that you know what Swift Charts are and their benefits, let’s go over their implementation. Firstly, you will have to create a new project using SwiftUI from Xcode 14.0 or higher version.

Import Charts then use the chart as the code given below

In Chart { … } we add a different kind of Marks to create different charts. A mark is what we see in charts.

Let’s learn more about Mark in swift charts

Types of Marks:

These are the most common types of marks that you would come across when using Swift Charts.

• BarMark
• LineMark
• PointMark
• AreaMark
• RuleMark
• RectangleMark

1. BarMark:

A BarMark is used to create a bar chart. Bar charts represent horizontally or vertically, and are usually used to represent different categories of data. These charts are extremely useful when comparing different categories of data and they can be created with minimal code and effort using the code given below.

In the example given below, we have created a struct and array to create multiple Bars. We can add a Data array to Chart Initializer, or we can add a For Loop.

NOTE: Struct must conform to Identifiable Protocol.

Horizontal Bar chart:

BarMark also supports bars to represent horizontally.

Just change the x-axis and y-axis values to represent your bar chart horizontally.

1D Bar Chart:

Using BarMark, we can also show data in one direction.

To represent the Bar chart in one direction we can use below PlottableValue:

init(x:yStart:yEnd:width:stacking:)

In the below example, I have used foreground-style property.

The foreground style property provides different colors for different data. Foreground style property automatically sets different colors so we can easily differentiate.

In the below example, I have used symbol property.

Symbol property provides different symbols for data.

Symbol property automatically sets different symbols so we can easily compare different data.

2. LineMark:

LineMark is used to create a Line Chart.

The line chart is usually used to show statistics. Like, yearly growth of the company.

3. PointMark:

PointMark is used to create Point Chart.

The point chart shows a relation between two data sets.

4. AreaMark:

AreaMark is used to create Area Chart.

The area chart is usually used to compare one or more categories over time.

5. RectangleMark:

RectangleMark is used to create Rectangle Chart.

A rectangle chart is used to point out special values. Like, Average or Trade breakout.

6. RuleMark:

RuleMark is used to create a Rule Chart.

A rule chart is used to show horizontal or vertical rules on the chart.

Swift Chart Methods:

Interpolation Method:

Using this method, we can convert chart shapes. The line chart’s default shape is linear.

foregroundStyle:

Using this method, we can set the color of the chart.

opacity:

Using this method, we can change chart opacity between 0 to 1.

cornerRadius:

Using this method, we can set the corner radius of the chart.

chartXScale & chartYScale:

The swift chart automatically set the scale from the data. Using this method, we can fix a scale of the chart.

chartXAxis & chartYAxis:

Using these methods, we can hide X or Y axis.

There are more methods available. Please visit Swift Chart Documentation here to explore more methods & properties.

Swift Chart Functionalities:

Combine Charts:

The swift chart is easy to customize. We can combine multiple charts also.

Below, I have added some examples of combined charts and their outputs.

VoiceOver:

VoiceOver is used to give an audible description of the chart data.

Example of VoiceOver integration in Charts.

Swift Chart Advantages:

• Easy to create
• Accessible
• Layout
• Supports Multi-Platform
• Animation

Xcode-supported features for swift charts:

• Color Scheme Variants: shows charts in Light & Dark Mode
• Orientation Variants: shows a chart of a different orientation
• Dynamic Type Variants: shows a chart with different sizes of fonts

Reference Link:

Swift charts documentation: https://developer.apple.com/documentation/charts

Conclusion

We hope that this information helped you better understand the advantages of using Swift Charts in your mobile application development company. If you have any queries or wish to request a blog on another tech topic, please feel free to comment it down below.