ios – SwiftUI Chart expanded


I am working with charts in SwiftUI, which include LineMark, PointMark, and AreaMark. Additionally, there is an annotation in the chart. However, I am facing difficulties in adjusting the chart width according to the screen width. The output I am currently getting is:

enter image description here

Part of my code:

       var chartGradient: LinearGradient {
    LinearGradient(gradient: Gradient(colors: [.accentColor, .clear]),
                   startPoint: .top,
                   endPoint: .bottom)
}

var chartData: [ChartData] = [
    ChartData(day: "Day 1", value: 40),
    ChartData(day: "Day 10", value: 50)
]

func chartView() -> some View {
    Chart(chartData) { data in
        LineMark(x: .value("Day", data.day),
                 y: .value("Value", data.value))
            .interpolationMethod(.catmullRom)
    
        PointMark(x: .value("Day", data.day),
                  y: .value("Value", data.value))
            .annotation(position: .top,
                        alignment: .bottom,
                        spacing: 10) {
                Text("")
                    .font(.body)
                    .foregroundColor(.white)
                    .padding(.horizontal, 12)
                    .padding(.vertical, 4)
                    .background(.accentColor)
                    .cornerRadius(8)
            }
        AreaMark(x: .value("Day", data.day),
                 y: .value("Value", data.value))
            .foregroundStyle(chartGradient)
            .opacity(0.3)
    }
    .frame(width: UIScreen.main.bounds.width, height: 150)
    .chartXAxis(.hidden)
    .chartYAxis(.hidden)
}

enter image description here

Screenshot of the chart without zooming: enter image description here

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img