为什么一些 BarMark 数据点的注释在 swiftui 图表中有两个值？

Question

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.

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)
        }
        
        
    }
}

Answer 1

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)
    }
}