I am doing some prototyping for a chart I want to add to an app. This chart has some integer data on the Y axis and the X axis is by day/date. I am using days since 1970 (off of date.timeIntervalSince1970) as an easy way to turn the dates into numerics. That works fine. The chart also shows 90 days worth of data out of 1,000 days of data in the array, and that works fine. The chart also scrolls across the data just fine. What I am missing is the ability to have the chart come up with the 'end' of the 90 days in scope, not the start of the 90 days. In other words if the days are numbered 1-1000, the chart is displayed with 1-90 showing and the rest available if you scroll towards the right. I want it to show 910-1000, with the rest available if you scroll to the left. I can find no way to tell SwiftUI which part of the array to show in that 90 day boundary; it just defaults to the beginning of the array and there seems to be no way to tell it any different. Do any SwiftUI/Chart experts out there know how to tell swift to do the opposite? Thanks in advance for any ideas.

I have looked at a lot of documentation but there seems to be no way to set which part of the source array as the part to show in the boundary. It would seem like the .chartXVisibleDomain(length: 90) modifier should be able to specify which 90 to show, but it seems it does not support that.

import SwiftUI
import Charts

struct ContentView: View {
  
  var id: UUID = UUID()
  
//test data
  @State private var dataArray:[Data] = {
    var array:[Data] = []
    array.append(Data(date: Date()))
    let calendar = Calendar.current
    for count in 1...1000{
      var currDate = array.last?.date ?? Date()
      var nextDate = calendar.date(byAdding: .day, value: -7, to: currDate)
      array.append(Data(date: nextDate!))
    }
    return array
  }()
  
  var body: some View {
      Chart(dataArray) { data in
        LineMark(
          x: .value("Number", data.daysSince1970),
          y: .value("Value", data.value)
        )
      }
    .chartScrollableAxes(.horizontal)
    .chartXVisibleDomain(length: 90)
    .chartXScale(domain: (dataArray.map { $0.daysSince1970 }.min()!)...(dataArray.map { $0.daysSince1970 }.max()!))
  }
}

#Preview {
  ContentView()
}

struct Data: Identifiable {
  
  var id:UUID = UUID()
  
  public var date: Date
  public var value: Int
  public var daysSince1970: Int
  
  init(date: Date) {
    
    self.date = date
    self.value = Int.random(in: 1...10)
    
    daysSince1970 = Int(date.timeIntervalSince1970 / 86400)
    
  }
  
}

I am doing some prototyping for a chart I want to add to an app. This chart has some integer data on the Y axis and the X axis is by day/date. I am using days since 1970 (off of date.timeIntervalSince1970) as an easy way to turn the dates into numerics. That works fine. The chart also shows 90 days worth of data out of 1,000 days of data in the array, and that works fine. The chart also scrolls across the data just fine. What I am missing is the ability to have the chart come up with the 'end' of the 90 days in scope, not the start of the 90 days. In other words if the days are numbered 1-1000, the chart is displayed with 1-90 showing and the rest available if you scroll towards the right. I want it to show 910-1000, with the rest available if you scroll to the left. I can find no way to tell SwiftUI which part of the array to show in that 90 day boundary; it just defaults to the beginning of the array and there seems to be no way to tell it any different. Do any SwiftUI/Chart experts out there know how to tell swift to do the opposite? Thanks in advance for any ideas.

I have looked at a lot of documentation but there seems to be no way to set which part of the source array as the part to show in the boundary. It would seem like the .chartXVisibleDomain(length: 90) modifier should be able to specify which 90 to show, but it seems it does not support that.

import SwiftUI
import Charts

struct ContentView: View {
  
  var id: UUID = UUID()
  
//test data
  @State private var dataArray:[Data] = {
    var array:[Data] = []
    array.append(Data(date: Date()))
    let calendar = Calendar.current
    for count in 1...1000{
      var currDate = array.last?.date ?? Date()
      var nextDate = calendar.date(byAdding: .day, value: -7, to: currDate)
      array.append(Data(date: nextDate!))
    }
    return array
  }()
  
  var body: some View {
      Chart(dataArray) { data in
        LineMark(
          x: .value("Number", data.daysSince1970),
          y: .value("Value", data.value)
        )
      }
    .chartScrollableAxes(.horizontal)
    .chartXVisibleDomain(length: 90)
    .chartXScale(domain: (dataArray.map { $0.daysSince1970 }.min()!)...(dataArray.map { $0.daysSince1970 }.max()!))
  }
}

#Preview {
  ContentView()
}

struct Data: Identifiable {
  
  var id:UUID = UUID()
  
  public var date: Date
  public var value: Int
  public var daysSince1970: Int
  
  init(date: Date) {
    
    self.date = date
    self.value = Int.random(in: 1...10)
    
    daysSince1970 = Int(date.timeIntervalSince1970 / 86400)
    
  }
  
}

• swift
• swiftui
• charts

1 Answer 1

attach this to yourChart(dataArray) to scroll to the end of the data:

.chartScrollPosition(initialX: dataArray.map { $0.daysSince1970 }.max()!)