SwiftUI Charts: Creating Line Graphs, Pie Charts and More

SwiftUI Charts will guide you through the process of incorporating stunning and interactive charts into your app’s user interface. Whether you want to showcase trends with line graphs, highlight proportions with pie charts, or compare data with bar charts, this beginner-friendly guide has got you covered.

With clear explanations and step-by-step instructions, you’ll learn how to leverage SwiftUI’s powerful tools to create visually captivating charts that bring your data to life.

No prior experience with SwiftUI or charting libraries is required. Get ready to transform your app’s data into a visual masterpiece with the simplicity and elegance of charts in SwiftUI.

Learn how to effortlessly integrate click here : charts in Swift

SwiftUICharts

SwiftUICharts focuses on providing a strong and easy to use base, on which you can build your beautiful custom charts. It provides basic building blocks, like a chart view (bar, pie, line and ring chart), grid view, card view, interactive label for displaying the curent chart value. So you decide, whether you build a fully fledged interactive view, or just display a bare bone chart

It supports interactions and animations

SwiftUI Charts
Pie Charts in swiftUI

It is fully customizable, and works together with native SwiftUI elements well

Charts in SwiftUI
pie charts in swiftUI
bar charts in swiftUI

How to install SwiftUI ChartView

To install SwiftUI ChartViews you can use the Swift Packet Manager (SPM).

In Xcode navigate to File → Swift Packages → Add Package Dependency...

Use this URL to add the dependency: https://github.com/AppPear/ChartView

In order to checkout the V2 beta version and try out the new features please checkout tag: 2.0.0-beta.

swiftui charts

How to create your first chart

Welcome to SwiftUI ChartViews. We are going to get started and creating our first chart. First of all create a new empty Xcode project which uses SwiftUI, and follow the installation guide to add ChartViews as a dependency.

The first step in our new and empty application is to open the view (usually called ContentView by default) and import SwiftUICharts on the top.

import SwiftUICharts

Once you have imported SwiftUICharts, you can access all the classes and views it brings to the project.

You can create four type of charts for now. Bar chart, Line chart, Pie chart and Ring chart. But first we need some data to display.

Declare your data inside the View

struct ContentView: View {
    var demoData: [Double] = [8, 2, 4, 6, 12, 9, 2]

If your data might change while the view is displayed, you can declare the data as a @State variable, so the charts will update based on the changes.

To create the chart we need to add the type of the chart we are using inside the body

var body: some View {
    BarChart()
    ...
}

To attach our data to our chart we will use the .data(...) function which will take our data in the argument.

var body: some View {
        BarChart()
            .data(demoData)
}

Behind the scenes .data(...) function uses @EnvironmentObject to pass the data to the chart.

Once we attached the data only one last thing we need to do. Style our chart. We use the .chartStyle(...) function to add our style. This takes a ChartStyle as an argument. In a ChartStyle you can define the colour of the background and the colours of the foreground. You can use plain colours or Gradients. Gradient is a custom ColorGradient(_ startColor: Color, _ endColor: Color) class which needs a start and end Color in order to create the gradient.

var body: some View {
    BarChart()
        .data(demoData)
        .chartStyle(ChartStyle(backgroundColor: .white,
                               foregroundColor: ColorGradient(.blue, .purple)))
}
bar charts in swiftUI

Try out!:

  1. you can change the chart type by replacing BarChart() with LineChart()PieChart() or RingsChart()
  2. you can add another foreground color and see what’s the effect in bar, pie or rings chart:
.chartStyle(ChartStyle(backgroundColor: .white,
                                   foregroundColor: [ColorGradient(.blue, .purple),
                                                     ColorGradient(.orange, .red)]))

Usage

It supports:

  • Line charts
  • Bar charts
  • Pie charts

Line charts (SwiftUI Charts)

LineChartView with multiple lines! First release of this feature, interaction is disabled for now, I’ll figure it out how could be the best to interact with multiple lines with a single touch.

line chart in swiftui
MultiLineChartView(data: [([8,32,11,23,40,28], GradientColors.green), ([90,99,78,111,70,60,77], GradientColors.purple), ([34,56,72,38,43,100,50], GradientColors.orngPink)], title: "Title")

Gradient colors are now under the GradientColor struct you can create your own gradient by GradientColor(start: Color, end: Color)

Available preset gradients:

  • orange
  • blue
  • green
  • blu
  • bluPurpl
  • purple
  • prplPink
  • prplNeon
  • orngPink

Full screen view called LineView!!!

 LineView(data: [8,23,54,32,12,37,7,23,43], title: "Line chart", legend: "Full screen") // legend is optional, use optional .padding()

Adopts to dark mode automatically

SwiftUI charts

You can add your custom darkmode style by specifying:

let myCustomStyle = ChartStyle(...)
let myCutsomDarkModeStyle = ChartStyle(...)
myCustomStyle.darkModeStyle = myCutsomDarkModeStyle

Line chart is interactive, so you can drag across to reveal the data points

You can add a line chart with the following code:

 LineChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", legend: "Legendary") // legend is optional

Turn drop shadow off by adding to the Initialiser: dropShadow: false

Bar charts (SwiftUI Charts)

Bar Charts In SwiftUI

[New feature] you can display labels also along values and points for each bar to descirbe your data better! Bar chart is interactive, so you can drag across to reveal the data points

You can add a bar chart with the following code:

Labels and points:

 BarChartView(data: ChartData(values: [("2018 Q4",63150), ("2019 Q1",50900), ("2019 Q2",77550), ("2019 Q3",79600), ("2019 Q4",92550)]), title: "Sales", legend: "Quarterly") // legend is optional

Only points:

 BarChartView(data: ChartData(points: [8,23,54,32,12,37,7,23,43]), title: "Title", legend: "Legendary") // legend is optional

ChartData structure Stores values in data pairs (actually tuple): (String,Double)

  • you can have duplicate values
  • keeps the data order

You can initialise ChartData multiple ways:

  • For integer values: ChartData(points: [8,23,54,32,12,37,7,23,43])
  • For floating point values: ChartData(points: [2.34,3.14,4.56])
  • For label,value pairs: ChartData(values: [("2018 Q4",63150), ("2019 Q1",50900)])

You can add different formats:

  • Small ChartForm.small
  • Medium  ChartForm.medium
  • Large ChartForm.large
BarChartView(data: ChartData(points: [8,23,54,32,12,37,7,23,43]), title: "Title", form: ChartForm.small)

For floating point numbers, you can set a custom specifier:

BarChartView(data: ChartData(points:[1.23,2.43,3.37]) ,title: "A", valueSpecifier: "%.2f")

For integers you can disable by passing: valueSpecifier: "%.0f"

You can set your custom image in the upper right corner by passing in the initialiser: cornerImage:Image(systemName: "waveform.path.ecg")

Turn drop shadow off by adding to the Initialiser: dropShadow: false

You can customize styling of the chart with a ChartStyle object:

Customizable:

  • background color
  • accent color
  • second gradient color
  • text color
  • legend text color
 let chartStyle = ChartStyle(backgroundColor: Color.black, accentColor: Colors.OrangeStart, secondGradientColor: Colors.OrangeEnd, chartFormSize: ChartForm.medium, textColor: Color.white, legendTextColor: Color.white )
 ...
 BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", style: chartStyle)

You can access built-in styles:

 BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", style: Styles.barChartMidnightGreen)

All styles available as a preset:

  • barChartStyleOrangeLight
  • barChartStyleOrangeDark
  • barChartStyleNeonBlueLight
  • barChartStyleNeonBlueDark
  • barChartMidnightGreenLight
  • barChartMidnightGreenDark

You can customize the size of the chart with a ChartForm object:

ChartForm

  • .small
  • .medium
  • .large
  • .detail
BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", form: ChartForm.small)

You can choose whether bar is animated or not after completing your gesture.

If you want to animate back movement after completing your gesture, you set animatedToBack as true.

Pie charts (SwiftUI Charts)

pie Charts In SwiftUI

You can add a pie chart with the following code:

 PieChartView(data: [8,23,54,32], title: "Title", legend: "Legendary") // legend is optional

Turn drop shadow off by adding to the Initialiser: dropShadow: false

WatchOS support for Bar charts:

WatchOS charts

Downlaod

SwiftUI Charts

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *