LineChart not displaying within a ScrollView with SwiftUI and Charts library

Question

I am using the Charts library (https://github.com/danielgindi/Charts)with SwiftUI. I am creating 3 simple line charts that I would like to be part of a ScrollView. Without the ScrollView the charts display fine. However, with the ScrollView the Charts are not displayed. What am I doing wrong?

In the code below, I am displaying 3 identical line charts. If the ScrollView is commented out, the charts are displayed. However, within the ScrollView, nothing is displayed

Code below:

    import SwiftUI
import Charts

struct ContentView: View {
    var body: some View {
        ScrollView(.vertical) {
            VStack {
                LineChart()
                    .padding()
                LineChart()
                    .padding()
                LineChart()
                    .padding()
            }
        }
    }
}

struct LineChart: UIViewRepresentable {
    func makeUIView(context: Context) -> LineChartView {
        let lineChart = LineChartView()
        lineChart.backgroundColor = .white
        setUpChart(lineChart: lineChart)
        lineChart.delegate = context.coordinator
        return lineChart
    }
    
    func setUpChart(lineChart: LineChartView) {
        let dataset = LineChartDataSet(entries: yvalues, label: "test data")
        dataset.drawCirclesEnabled = false
        dataset.mode = .cubicBezier
        dataset.lineWidth = 2
        dataset.setColor(.red)
        
        let gradientColors = [UIColor.white.cgColor, UIColor.red.cgColor]
        
        if let gradient = CGGradient.init(colorsSpace: nil, colors: gradientColors as CFArray, locations: nil) {
            dataset.fill = Fill.fillWithLinearGradient(gradient, angle: 90.0)
        } else {
            dataset.fill = Fill(color: .white)
            
        }
        
        dataset.fillAlpha = 1.0
        dataset.drawFilledEnabled = true
        dataset.drawHorizontalHighlightIndicatorEnabled = false
        dataset.highlightColor = .systemRed
        dataset.highlightLineWidth = 2
        
        
        let data = LineChartData(dataSet: dataset)
        lineChart.data = data
        lineChart.rightAxis.enabled = false
        let yaxis = lineChart.leftAxis
        yaxis.labelFont = .boldSystemFont(ofSize: 12)
        yaxis.labelTextColor = .blue
        yaxis.axisLineColor = .blue
        
        lineChart.xAxis.labelPosition = .bottom
        lineChart.xAxis.labelFont = .boldSystemFont(ofSize: 12)
        lineChart.xAxis.labelTextColor = .blue
        lineChart.xAxis.axisLineColor = .blue
        
        lineChart.highlightPerTapEnabled = true
        lineChart.highlightPerDragEnabled = true
        
        lineChart.animate(xAxisDuration: 2.5)
        lineChart.drawMarkers = true
        
        let marker = BalloonMarker(color: UIColor(white: 180/255, alpha: 1),
                                   font: .systemFont(ofSize: 12),
                                   textColor: .white,
                                   insets: UIEdgeInsets(top: 8, left: 8, bottom: 20, right: 8))
        marker.chartView = lineChart
        marker.minimumSize = CGSize(width: 80, height: 40)
        lineChart.marker = marker
    }
    
    func updateUIView(_ uiView: LineChartView, context: Context) {
        
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, ChartViewDelegate {
        private let parent: LineChart
        
        init(_ chartView: LineChart) {
            self.parent = chartView
        }
    }
    
    func getChartDataPoints(sessions: [Int], accuracy: [Double]) -> [ChartDataEntry] {
          var dataPoints: [ChartDataEntry] = []
          for count in (0..<sessions.count) {
              dataPoints.append(ChartDataEntry.init(x: Double(sessions[count]), y: accuracy[count]))
          }
          return dataPoints
      }
        
    let yvalues: [ChartDataEntry] = [
        ChartDataEntry(x: 0.0, y: 10.0),
        ChartDataEntry(x: 1.0, y: 5.0),
        ChartDataEntry(x: 2.0, y: 7.0),
        ChartDataEntry(x: 3.0, y: 5.0),
        ChartDataEntry(x: 4.0, y: 10.0),
        ChartDataEntry(x: 5.0, y: 6.0),
        ChartDataEntry(x: 6.0, y: 5.0),
        ChartDataEntry(x: 7.0, y: 7.0),
        ChartDataEntry(x: 8.0, y: 8.0),
        ChartDataEntry(x: 9.0, y: 12.0),
        ChartDataEntry(x: 10.0, y: 13.0),
        ChartDataEntry(x: 11.0, y: 5.0),
        ChartDataEntry(x: 12.0, y: 7.0),
        ChartDataEntry(x: 13.0, y: 13.0),
        ChartDataEntry(x: 14.0, y: 15.0),
        ChartDataEntry(x: 15.0, y: 6.0),
        ChartDataEntry(x: 16.0, y: 22.0),
        ChartDataEntry(x: 17.0, y: 18.0),
        ChartDataEntry(x: 18.0, y: 25.0),
        ChartDataEntry(x: 19.0, y: 22.0)
    ]
}

Answer 1

It doesn't display because inside the ScrollView you have to set the height of the chart. Try setting the frame height like this:

LineChart()
    .frame(height: 300)
    .padding()