Add scrolling capabilities

[Sun3]

Great job on the heat map. I would love to see the ability to have the content scroll and not resize if it does not fit on the View.

If there is a way to do this, please let me know.

Thanks.

[JediPixels]

if anyone is interested I wrapped the Chart() inside a ScrollView, then set .frame(maxHeight: 200) and .defaultScrollAnchor(.bottomTrailing) to have the chart scrolled to the latest records.

        ScrollView(.horizontal) {
            Chart(contributions) { contribution in
                RectangleMark(
                    xStart: .value("Start week", contribution.date, unit: .weekOfYear),
                    xEnd: .value("End week", contribution.date, unit: .weekOfYear),
                    yStart: .value("Start weekday", weekday(for: contribution.date)),
                    yEnd: .value("End weekday", weekday(for: contribution.date) + 1)
                )
                .clipShape(RoundedRectangle(cornerRadius: 4).inset(by: 2))
                .foregroundStyle(by: .value("Count", contribution.count))
            }
            .chartPlotStyle { content in
                content
                    .aspectRatio(aspectRatio, contentMode: .fit)
            }
            .chartForegroundStyleScale(range: Gradient(colors: colors))
            .chartXAxis {
                AxisMarks(position: .top, values: .stride(by: .month)) {
                    AxisValueLabel(format: .dateTime.month())
                        .foregroundStyle(Color(.label))
                }
            }
            .chartYAxis {
                AxisMarks(position: .leading, values: [1, 3, 5]) { value in
                    if let value = value.as(Int.self) {
                        AxisValueLabel {
                            Text(shortWeekdaySymbols[value - 1])
                        }
                        .foregroundStyle(Color(.label))
                    }
                }
            }
            .chartYScale(domain: .automatic(includesZero: false, reversed: true))
            .chartLegend {
                HStack(spacing: 4) {
                    Text("Less")
                    ForEach(legendColors, id: \.self) { color in
                        color
                            .frame(width: 10, height: 10)
                            .cornerRadius(2)
                    }
                    Text("More")
                }
                .padding(4)
                .foregroundStyle(Color(.label))
                .font(.caption2)
            }
            .padding()
        }
        .frame(maxHeight: 200)
        .defaultScrollAnchor(.bottomTrailing)

Hopefully, this helps someone who is looking to accomplish this.

[aehlke]

@JediPixels amazing, thank you for sharing

since you have more experience now, I wonder if you know about this: #4 aligning month labels