1

I'm using Swift Charts to create a heat map as shown below and there are faint lines in the chart. In the screen shot, you can see the line in the Digital Color Meter window. I thought the lines were the grid lines of the chart but I made the X and Y axis hidden and the lines still appear. Any ideas on what is causing these lines to appear and how can I remove them?

import SwiftUI
import Charts

struct Point: Hashable, Identifiable {
    let id = UUID()
    let x: Int
    let y: Int
    let val: Float
}

struct Grid {
    
    let rows: Int
    let columns: Int
    var points = [Point]()
    
    init(rows: Int, columns: Int) {
        self.rows = rows
        self.columns = columns
        generateData()
    }
    
    mutating func generateData() {
        for i in 0..<rows {
            for j in 0..<columns {
                let v = Float.random(in: 0...1)
                let point = Point(x: j, y: i, val: v)
                points.append(point)
            }
        }
    }
}

struct ContentView: View {
    
    @State private var grid = Grid(rows: 10, columns: 10)
    
    var body: some View {
        Chart(grid.points) { point in
            RectangleMark(
                xStart: .value("xStart", point.x),
                xEnd: .value("xEnd", point.x + 1),
                yStart: .value("yStart", point.y),
                yEnd: .value("yEnd", point.y + 1)
            )
            .foregroundStyle(by: .value("Weight", point.val))
        }
        .chartYAxis(.hidden)
        .chartXAxis(.hidden)
        .chartForegroundStyleScale(range: Gradient(colors: [.yellow, .red]))
        .padding()
        .frame(minWidth: 400, minHeight: 400)
    }
}

heat map

wigging
  • 8,492
  • 12
  • 75
  • 117
  • This apparently only appears for small `RectangleMark`s. If they are big enough, then you don't see it. Seems like something inherent to `RectangleMark`s... – Sweeper Jul 08 '23 at 14:18
  • This also shows up on the example in the [documentation page](https://developer.apple.com/documentation/charts/rectanglemark). Look at it with digital color meter. – Sweeper Jul 08 '23 at 14:20
  • Isn't this just the normal anti-aliasing border between colors? – matt Jul 08 '23 at 15:47
  • I agree with @matt. This is just an artefact of the rectangle marks not perfectly aligning on pixel boundaries. You use a frame of 400x400 but that is before the padding is added. The size of the chart is not evenly divisible by 10 so each square has a fractional size. As an experiment, remove the padding and I think there will be no blurred edges as 400 is divisible by 10. – Geoff Hackworth Jul 08 '23 at 17:23
  • @GeoffHackworth I removed the padding and the blurred edges disappeared. So the faint lines are definitely caused by the RectangleMark aligning to pixels. Is there a way to define the RectangleMark size based on the frame size so that the faint lines don't appear? – wigging Jul 08 '23 at 17:32
  • @wigging I don’t have much experience with SwiftUI and none with Charts. If you know that you will always display 10 items in each dimension then you can adjust the frame so that it fits without fractional sizes. Or maybe a chart will fill whatever space it has and you can simply remove the frame entirely? – Geoff Hackworth Jul 08 '23 at 17:37

0 Answers0