How do you make a line chart and bar chart graph in SwiftUI?

Hello, in this blog post, we’ll learn how to make the Line Chart with Swift charts with the SwiftUI. Follow along on this blog and enjoy . In the end of that blog, you will find the entire code.

Simple line chart & Chart Chart graph in SwiftUI

The first step is to start by importing your chart. Create an Enum name LineChartType. We will then use that type of enum to create several plots on the graph.

The following enum comes with two types that have the property of color that is computed that will return the color for each enum type.

So, Let’s Start to create a line chart graph with simple date list. Start your Xcode and create a new swift class with the chartView and follow the below steps for make a simple Graph view in swiftUI.

The days of utilizing third-party libraries to display data are largely gone. Most recent versions of iOS (16.0) included Swift Charts and makes it easier for developers to show data in accordance with SwiftUI design guidelines.

Learn how to begin using the library by designing and creating a vertical bar graph. Start with a blank slate, design an entirely fresh Xcode project, specify the data model and data, then begin creating your chart after that. At the end of the process you’ll have an X-ray bar chart that has gradient colors, annotations, and custom labels for axis. Let’s get started!

Table of Contents:

  • Bar Chart Data Model
  • How to Create a Basic Bar Chart in SwiftUI
  • Styling iOS Bar Charts — Everything You Need to Know
  • Summing up SwiftUI Bar Charts

Bar Chart Data Model

If you’re starting with an uncluttered slate it is recommended that you create an entirely new Xcode project using your default ContentView.swift file for the sole view:

SwiftUI Line Chart Code snip

Chart{
   ForEach(simpleAnytic){item in
      LineMark(
          x: .value("date ", item.date,unit: .hour),
          y: .value("views", item.temperature ) )
                }
        }.padding(.all,15)

SwiftUI Bar Chart Code Snip

 

SwiftUI line Chart and Bar Chart Graph Example Code 

Step 1: Create DataModel Class.

create a data model class a make a list with demo data for the line chart to show in the chart x and y axis.

import Foundation
import SwiftUI

struct ChartDate: Identifiable {

    var id = UUID().uuidString
    var date: Date
    var temperature: Double
    var animater: Bool = false

}

extension Date {
    func updateHour(value: Int)->Date{
        let calender = Calendar.current
        return calender.date(bySettingHour: value, minute: 0, second: 0, of: self) ?? .now
    }
}

let simple_date = [
    ChartDate(date: Date().updateHour(value: 6),temperature: 1230 ),
    ChartDate(date: Date().updateHour(value: 7),temperature: 1500 ),
    ChartDate(date: Date().updateHour(value: 8),temperature: 1030 ),
    ChartDate(date: Date().updateHour(value: 9),temperature: 1000 ),
    ChartDate(date: Date().updateHour(value: 10),temperature: 1930 ),
    ChartDate(date: Date().updateHour(value: 11),temperature: 1430 ),
    ChartDate(date: Date().updateHour(value: 12),temperature: 2230 ),
    ChartDate(date: Date().updateHour(value: 13),temperature: 1330 ),
    ChartDate(date: Date().updateHour(value: 14),temperature: 1930 ),              

]

In this data list i add temperature data with the date and time.

Step 2 : ChartListView Swift file to implement line chart 

in this swift class i make UI for line chart using with VStack and then import the Swift Chart for showing list of data into chart. Follow below code snip.

import Foundation
import SwiftUI
import Charts

struct LineChartView: View {

    @State var simpleAnytic : [ChartDate] = simple_date
  
  var body: some View {

        VStack(alignment: .leading){

            Text("Trends")
                .font(.headline)
                .padding(.all, 10)

                    VStack{
                        HStack{
                            Text("Total Install : 23K")
                                .font(.caption)
                                .padding(.all, 10)
                            Spacer()
                            VStack{
                                NavigationLink(
                                    destination: SavingDetails()
                                )
                                {
                                    Text("more details")
                                        .font(.caption)
                                        .foregroundColor(.white)
                                        .padding()
                                        .frame(width: 100, height: 20)
                                        .background(Color.blue)
                                        .cornerRadius(15.0)                
                                }


                                Text("12-Dec-2023")
                                    .font(.caption)
                            }
                            .padding(.all,10)
                        }.padding(.all,5)

                        Chart{
                            ForEach(simpleAnytic){item in
                                LineMark(
                                    x: .value("date ", item.date,unit: .hour),
                                    y: .value("views", item.temperature ) )
                            }
                        }.padding(.all,15)
                    }.frame(width:350, height: 250)
                        .background(
                            RoundedRectangle(cornerRadius: 20, style: .continuous)
                                .fill(.white.shadow(.drop(radius: 2))))
                        .padding(.all,5)

                    VStack{
                        HStack{
                            Text("Active User  : 20K")
                                .font(.caption)
                                .padding(.all, 10)
                            Spacer()
                            VStack{
                                NavigationLink(
                                    destination: SavingDetails()
                                )
                                {
                                    Text("more details")
                                        .font(.caption)
                                        .foregroundColor(.white)
                                        .padding()
                                        .frame(width: 100, height: 20)
                                        .background(Color.blue)
                                        .cornerRadius(15.0)
                                }
                                Text("12-Dec-2023")
                                   .font(.caption)
                            }
                            .padding(.all,10)
                        }.padding(.all,5)

                        Chart{
                            ForEach(simpleAnytic){item in
                                LineMark(
                                    x: .value("date ", item.date,unit: .hour),
                                    y: .value("views", item.temperature ) ) 

                            }

                        }.padding(.all,15)

                    }.frame(width:350 , height: 250)
                        .background(
                            RoundedRectangle(cornerRadius: 20, style: .continuous)
                                .fill(.white.shadow(.drop(radius: 2))))
                        .padding(.all,5)


                    VStack{
                        HStack{
                            Text("UnInstall user: 2K ")
                                .font(.caption)
                                .padding(.all, 10)
                            Spacer()
                            VStack{
                                NavigationLink(
                                    destination: SavingDetails()
                                )
                                {
                                    Text("more details")
                                        .font(.caption)
                                        .foregroundColor(.white)
                                        .padding()
                                        .frame(width: 100, height: 20)
                                        .background(Color.blue)
                                        .cornerRadius(15.0)
                                }

                                Text("12-Dec-2023")
                                    .font(.caption)
                            }
                            .padding(.all,10)
                        }.padding(.all,5)

                        Chart{
                            ForEach(simpleAnytic){item in
                                BarMark(
                                    x: .value("date ", item.date,unit: .hour),
                                    y: .value("views", item.temperature ) )
                            }
                        }.padding(.all,15)
                    }.frame(width:350 ,height: 250)
                        .background(
                            RoundedRectangle(cornerRadius: 20, style: .continuous)
                                .fill(.white.shadow(.drop(radius: 2))))
                        .padding(.all,10)
        }

    }
}

struct User_Previews: PreviewProvider {
    static var previews: some View {
        LineChartView()
    }
}

 

Read More Tutorial