The Chart view in SwiftUI is the foundational component for creating various chart types. It serves as a container for different chart elements, such as marks, scales, and axes. The Chart view provides a declarative and flexible way to visualize data in the apps.

Let’s create a basic line chart to visualize temperature data over a week to see Chart view in action.

We will start with temperature model

struct TemperatureData: Identifiable {
  let id = UUID()
  let day: String
  let temperature: Double
}

Next, we will create a view model with some sample data

import Observation

@Observable
final class TemperatureViewModel {
  var temperatures: [TemperatureData] = [
    TemperatureData(day: "Mon", temperature: 52),
    TemperatureData(day: "Tue", temperature: 76),
    TemperatureData(day: "Wed", temperature: 75),
    TemperatureData(day: "Thu", temperature: 90),
    TemperatureData(day: "Fri", temperature: 76),
    TemperatureData(day: "Sat", temperature: 66),
    TemperatureData(day: "Sun", temperature: 75)
  ]
}

With the data structure in place, we are ready to create our first chart using the Charts framework.

import Charts
import SwiftUI

struct ExampleChartView: View {
  @State private var viewModel = TemperatureViewModel()
  var body: some View {
    Chart {
      ForEach(viewModel.temperatures) { temperature in
        LineMark(
          x: .value("Day", temperature.day),
          y: .value("Temperature", temperature.temperature)
        )
      }
    }
    .frame(height: 200)
    .padding()
  }
}

In this view, we use the Chart view to encapsulate the plotted chart. A ForEach loop iterates over the temperatures collection from the view model, creating a LineMark for each data point. The LineMark plots a line connecting these data points in the chart.

The Chart view offers numerous modifiers to customize its appearance and behavior (we will explore them in later chapters):

• Chart Style: Modify the overall style of the chart using the chartStyle modifier.

• Legend: Add a legend to explain the chart elements using the chartLegend modifier.

• Axes: Customize the appearance and labels of the axes using chartXAxis and chartYAxis modifiers.

• Title: Add a title to the chart using the chartTitle modifier.

• Data Labels: Display data labels on the chart using the dataLabels modifier.

Beyond line charts, the Charts framework supports a variety of chart types, including:

• Bar charts

• Scatter plots

• Area charts

• Pie charts

• Radar charts

• And more

By combining different mark types and customizing the chart’s appearance, we can create complex and informative visualizations to suit various data scenarios.

The Chart view does all the heavy lifting by creating the necessary components for the given data. A basic Chart view consists of the following components:

• Data: The data to be visualized, typically an array of data points.

• Marks: Visual representations of data points, such as lines, bars, or points.

• Scales: Define how data values are mapped to visual coordinates on the chart.

• Axes: Provide context and reference points for interpreting chart data.

• Modifiers: Customize the appearance and behavior of the chart.

The picture below shows the basic components generated by the Chart view.