Charts

ContentView.swift

import SwiftUI
import Charts

struct ChartData: Identifiable {
  var day: String
  var value: Double

  var id: String { day }

  static var mock = [
    ChartData(day: "1", value: 100000),
    ChartData(day: "2", value: 11000),
    ChartData(day: "3", value: 13000),
    ChartData(day: "4", value: 15000),
    ChartData(day: "5", value: 16000),
    ChartData(day: "6", value: 17000),
    ChartData(day: "7", value: 18000),
    ChartData(day: "8", value: 19000),
    ChartData(day: "9", value: 20000),
    ChartData(day: "10", value: 20000),
    ChartData(day: "11", value: 10000),
    ChartData(day: "12", value: 11000),
    ChartData(day: "13", value: 13000),
    ChartData(day: "14", value: 15000),
    ChartData(day: "15", value: 16000),
    ChartData(day: "16", value: 17000),
    ChartData(day: "17", value: 18000),
    ChartData(day: "18", value: 19000),
    ChartData(day: "19", value: 20000),
    ChartData(day: "20", value: 20000),
    ChartData(day: "21", value: 10000),
    ChartData(day: "22", value: 11000),
    ChartData(day: "23", value: 13000),
    ChartData(day: "24", value: 15000),
    ChartData(day: "25", value: 16000),
    ChartData(day: "26", value: 17000),
    ChartData(day: "27", value: 18000),
    ChartData(day: "28", value: 19000),
    ChartData(day: "29", value: 20000),
    ChartData(day: "30", value: 20000),
  ]
}

struct ContentView: View {

  @State private var chartData = ChartData.mock

  var body: some View {
    Chart {
      ForEach(chartData) { data in
        LineMark(
          x: .value("Date", data.day),
          y: .value("Value", data.value)
        )
        .foregroundStyle(.primary)
        .interpolationMethod(.linear)
      }
    }
    .chartYAxis {
      AxisMarks(position: .leading)
    }
    .chartXAxis {
      // 2.
      AxisMarks { value in
        // 2a.
        AxisValueLabel {
          if let text = value.as(String.self) {
            if let day = Int(text) {
              if day == 1 || day % 5 == 0 {
                Text(text)
              }
            }
          }
        }
      }
    }
    .padding()
    .frame(height: 300)
  }
}

#Preview {
  ContentView()
}