SwiftCharts Not Showing Accurate Data Until Tap Gesture on Chart

I am showing weather data in a TabView where each tab will show the forecast for that day and then an hour-by-hour Swift Charts of the temperature, chance of precipitation, and then dew point for that day. The day and a text description of that forecast correctly displays for each tab. However, the chart will only show the correct data if you perform a tap gesture on the chart.

To reproduce this issue, I do the following:

  1. Tap on a day in the "Upcoming Week", preferably a day in the middle.
  2. Swipe a couple days to the left or right and use the tap gesture on one of the charts.

Oddly, other data on the tab is accurate, it is really just within the SwiftChart. I did try doing a horizontal ScrollView instead but I had the same issue. I also followed the demo for SwiftCharts from WWDC.

Below is code that shows the TabView:

struct UpcomingDaysView: View {
    let forecastModel:WeatherModel
    @State var targetPeriod:WeatherForecastDayPeriod

    var body: some View {
        TabView(selection:$targetPeriod) {
            ForEach(forecastModel.dailyPeriods, id: \.self) {period in
                DailyViewChartDetail(forecastModel: forecastModel, periodToShow: period)
                    .frame(alignment: .topLeading)
                    .tag(period)
            }
        }
        .containerRelativeFrame([.vertical])
        .tabViewStyle(.page)
        .indexViewStyle(.page(backgroundDisplayMode: .always))
        .padding(EdgeInsets(top: 20, leading: 0, bottom: 0, trailing: 0))
    }
}
}

And here is the DailyViewChartDetail:

struct DailyViewChartDetail: View {
    var forecastModel:WeatherModel
    var periodToShow:WeatherForecastDayPeriod
    
    var body: some View {
        VStack {
            Text("\(DateUtility.getLongerDay(date: DateUtility.getDate(stringDate: periodToShow.dayForecast.startTime)))")
                .font(.title2)
            Text("\(periodToShow.dayForecast.detailedForecast)")
                .font(.subheadline)
                .padding(5)
            HourlyViewChart(forecastModel: WeatherPeriodUtility.filterModel(forecastModel: forecastModel, targetPeriod: periodToShow))
                .padding(5)
            Spacer()
        }
        .frame(
            alignment: .topLeading
        )
        
    }
}

And then some of the more relevant code in the HourlyViewChart

struct HourlyViewChart: View {
    var forecastModel:WeatherModel
    
    @State var range: (Date, Date)? = nil
    @State var rawSelectedDateTemp: Date? = nil
    @State var rawSelectedDatePrecipitation: Date? = nil
    @State var rawSelectedDewPoint: Date? = nil
    // ... more code

Below is an image that shows the issue:

Answered by simonfromhelix in 798173022

One thought comes to mind which I've seen a similar issue on when using Swift Charts in a TabView.

You could try setting the .id() modifier on the chart maybe with the date of the day the chart is displaying.

For myself this resolved an issue where I has a Swift Chart (actually showing Health data) for each day and the wrong days were displayed sometimes when scrolling through the TabView.

Hope this helps, apologies if it doesn't!

Accepted Answer

One thought comes to mind which I've seen a similar issue on when using Swift Charts in a TabView.

You could try setting the .id() modifier on the chart maybe with the date of the day the chart is displaying.

For myself this resolved an issue where I has a Swift Chart (actually showing Health data) for each day and the wrong days were displayed sometimes when scrolling through the TabView.

Hope this helps, apologies if it doesn't!

@simonfromhelix You are a saint! I never would have thought of using the id but that did the trick. I used something similar for an image view that shows the radar because it would not show the latest radar image.

I applied the ID to the GroupBox that contains the charts and that did the trick.

Again, thank you!

SwiftCharts Not Showing Accurate Data Until Tap Gesture on Chart
 
 
Q