swiftuichartsweatherkit

why annotations for some BarMark datapoints have two values in swiftui charts?

I have a chart showing a 10 day forecast using weatherkit, I want to show min and max temp per day so I use a BarMark with two values in the x axis. I want to show annotation for the min and one for the max. but somehow some of them appear double with different values.

enter image description here is this an Apple issue or my code issue?

struct TenDayForecastViewChart: View {
    let dayWeatherList: [DayWeather]
    
    var body: some View {
        VStack(alignment: .leading) {
            Text("10-DAY FORECAST")
                .font(.caption)
                .opacity(0.5)
                .padding()
            
            Chart{
                ForEach(dayWeatherList, id: \.date) { dailyWeather in
                    BarMark(xStart: .value("Temperature", dailyWeather.lowTemperature.converted(to: .fahrenheit).value),
                            xEnd: .value("Temperature", dailyWeather.highTemperature.converted(to: .fahrenheit).value),
                            y: .value("Day", dailyWeather.date.formatAsAbbreviatedDay())
                    )
                    .foregroundStyle(Color.black)
                    .annotation(position: .overlay, alignment: .leading) {
                        HStack {
                            
                            //Image(systemName: "\(dailyWeather.symbolName)").foregroundColor(.white)
                            
                            Text("\(dailyWeather.lowTemperature.converted(to: .fahrenheit).value, format: .number.precision(.fractionLength(0)))")
                                .foregroundColor(.white)
                        }
                    }
                    .annotation(position: .overlay, alignment: .trailing) {
                                                    Text("\(dailyWeather.highTemperature.converted(to: .fahrenheit).value, format: .number.precision(.fractionLength(0)))")
                                                        .foregroundColor(.blue)
                    }
                    

                    
                
                }

            }
            //.chartLegend(position: .top, alignment: .bottomTrailing)
            .chartXAxis(.hidden)
            //.chartYAxis(.hidden)
            .frame(height: 250)
            .padding(.horizontal)
        }
        
        
    }
}
Solution

  • I suppose in your 10 days you have 2x "Sun", "Mon", "Tue" each. So the y plot value for these data points is identical, and by default BarCharts adds those together.

    1. You can pass the full Date (not only the day String) into the BarChart and use
    .value("Day", dailyWeather.date, unit: .day)

    and add a custom formatting in .chartYAxis:

    .chartYAxis {
    AxisMarks(values: .stride(by: .day)) { _ in
        AxisGridLine()
        AxisTick()
        AxisValueLabel(format: .dateTime.weekday(.abbreviated), centered: true)
    }
}