Friday, August 5, 2022
HomeiOS DevelopmentMaking a Line Chart Utilizing SwiftUI Charts API

Making a Line Chart Utilizing SwiftUI Charts API


The Charts framework is one in every of my favorite options for the brand new model of SwiftUI in iOS 16. Previous to iOS 16, you have to construct your personal charts or depend on third social gathering library to render charts for you. With the discharge of this new framework, Apple has made it very straightforward for builders to create animated and interactive charts.

I’ve briefly mentioned the utilization of the Charts API in this put up. For this tutorial, let’s see how one can use the APIs to create a line chart.

The Climate Information

To exhibit the SwiftUI Charts API, we are going to create a line chart that shows the common temperature of Hong Kong, Taipei, and London from 2021-Jul to 2022-Jun.

To retailer the climate information, I created a WeatherData struct like beneath:

The Chart initializer takes in an inventory of Identifiable objects. That is why we make the WeatherData conform the Identifiable protocol.

For every metropolis, we create an array to retailer the climate information. Right here is an instance for London:

To retailer the climate information of the cities, we even have an array for that:

Making a Easy Line Chart Utilizing Chart and LineMark

To create any sorts of chart utilizing the Charts framework, it’s a must to first import the Chartsframework:

Subsequent, you begin with the Chart view. Contained in the Chart view, you present a set of LineMark to create a line chart. Right here is an instance:

What the code above does is to plot a line chart for displaying the common temperature of Hong Kong. The ForEach assertion loops by way of all objects saved in hkWeatherData. For every merchandise, we create a LineMark object that the x axis is ready to the date and the y axis is ready to the common temperature.

Optionally, you’ll be able to resize the chart utilizing the body modifier. For those who preview the code in Xcode preview, it is best to see the next line chart:

swiftui-line-chart-simple

Customizing Chart Axes

You’ll be able to customise each x and y axes through the use of the chartXAxis and chartYAxis modifiers respectively. Let’s say, if we wish to show the month labels utilizing the digit format, we will connect the chartXAxis modifier to the Chart view like this:

Inside chartXAxis , we create a visible mark known as AxisMarks for the values of month. For every worth, we show a price label through the use of a selected format. This line of code tells SwiftUI chart to make use of the digit format:

On high of that, we added some grid strains through the use of AxisGridLine.

For the y-axis, as an alternative of show the axis on the trailing (or proper) aspect, we wish to change it to the main (or left) aspect. To do this, connect the chartYAxis modifier like this:

For those who’ve made the change, Xcode preview ought to replace the chart like beneath. The y-axis is moved to the left aspect and the format of month is modified. Plus, it is best to see some grid strains.

swiftui-charts-changing-axis

Customizing the Background Coloration of the Plot Space

The chartPlotStyle modifier permits you to change the background coloration of the plot space. Connect the modifier to the Chart view like this:

We will then change the plot space utilizing the background modifier. For instance, we alter the plot space to gentle blue.

swiftui-line-chart-background

Making a Multi-line Chart

Now the chart shows a single supply of information (i.e. the climate information of Hong Kong), so how can we show the climate information of London and Taipei in the identical line chart?

You’ll be able to rewrite the code of Chart view like this:

Now we have one other ForEach to loop by way of all of the cities of the chart information. Right here, the foregroundStyle modifier is used to use a special coloration for every line. You don’t need to specify the colour. SwiftUI will routinely decide the colour for you.

swiftui-multi-line-chart

Proper now, all of the cities share the identical image. If you wish to use a definite image, place the next line of code after foregroundStyle:

Now every metropolis has its personal image within the line chart.

swiftui-line-chart-symbol

Customizing the Interpolation Methodology

You’ll be able to alter the interpolation methodology of the road chart by attaching the interpolationMethod modifier to LineMark. Right here is an instance:

For those who change the interpolation methodology to .stepStart, the road chart now seems to be like this:

swiftui-chart-interpolation-method

Apart from .stepStart, you’ll be able to check out the next choices:

  • cardinal
  • catmullRom
  • linear
  • monotone
  • stepCenter
  • stepEnd

Abstract

The Charts framework is a superb addition to SwiftUI. Even for those who simply start studying SwiftUI, you’ll be able to create pleasant charts with a number of strains of code. Whereas this tutorial focuses on line charts, the Charts API makes it very straightforward for builders to transform the chart to different kinds reminiscent of bar chart. You’ll be able to try the Swift Charts documentation for additional studying.

Be aware: We’re updating our Mastering SwiftUI ebook for iOS 16. If you wish to begin studying SwiftUI, try the ebook right here. You’ll obtain a free replace later this 12 months.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular