Best SwiftUI Charts Libraries in 2026

import Charts

struct DailyRevenue: Identifiable {
    let id = UUID()
    let day: String
    let amount: Double
}

struct LineChartView: View {
    let data: [DailyRevenue]

    var body: some View {
        Chart(data) { point in
            LineMark(
                x: .value("Day", point.day),
                y: .value("Revenue", point.amount)
            )
            .interpolationMethod(.catmullRom)   // smooth, not jagged
            .lineStyle(StrokeStyle(lineWidth: 2.5, lineCap: .round))

            PointMark(
                x: .value("Day", point.day),
                y: .value("Revenue", point.amount)
            )
            .symbolSize(60)
        }
        .foregroundStyle(Color.accentColor)
        .chartYAxis { AxisMarks(position: .leading) }
        .frame(height: 200)
    }
}

Chart(data) { point in
    AreaMark(
        x: .value("Day", point.day),
        y: .value("Revenue", point.amount)
    )
    .interpolationMethod(.catmullRom)
    .foregroundStyle(
        .linearGradient(
            colors: [Color.accentColor.opacity(0.5), Color.accentColor.opacity(0.02)],
            startPoint: .top,
            endPoint: .bottom
        )
    )

    LineMark(
        x: .value("Day", point.day),
        y: .value("Revenue", point.amount)
    )
    .interpolationMethod(.catmullRom)
    .foregroundStyle(Color.accentColor)
    .lineStyle(StrokeStyle(lineWidth: 2.5))
}
.frame(height: 200)

Chart(data) { point in
    BarMark(
        x: .value("Day", point.day),
        y: .value("Revenue", point.amount)
    )
    .cornerRadius(4)
    .foregroundStyle(by: .value("Day", point.day))
}
.chartLegend(.hidden)
.chartYAxis {
    AxisMarks(position: .leading) { value in
        AxisGridLine()
        AxisValueLabel {
            if let v = value.as(Double.self) {
                Text(v, format: .currency(code: "USD").precision(.fractionLength(0)))
            }
        }
    }
}
.frame(height: 200)

let average = data.map(\.amount).reduce(0, +) / Double(data.count)

Chart {
    ForEach(data) { point in
        BarMark(
            x: .value("Day", point.day),
            y: .value("Revenue", point.amount)
        )
        .cornerRadius(4)
        // Colour communicates the comparison without a legend.
        .foregroundStyle(point.amount > average ? Color.accentColor : Color.accentColor.opacity(0.35))
    }

    RuleMark(y: .value("Average", average))
        .lineStyle(StrokeStyle(lineWidth: 1.5, dash: [4, 3]))
        .foregroundStyle(.orange)
        .annotation(position: .top, alignment: .trailing) {
            Text("avg").font(.caption2).foregroundStyle(.orange)
        }
}
.frame(height: 200)

Chart(samples) { s in
    PointMark(
        x: .value("Sessions", s.sessions),
        y: .value("Revenue", s.revenue)
    )
    .foregroundStyle(by: .value("Cohort", s.cohort))
    .symbolSize(80)
    .opacity(0.8)
}
.chartXAxis { AxisMarks(preset: .aligned) }
.frame(height: 200)

// SectorMark requires iOS 17. Gate the call site, or show a
// BarMark breakdown on iOS 16.
@available(iOS 17, *)
struct SourceBreakdown: View {
    let slices: [Slice]

    var body: some View {
        Chart(slices) { slice in
            SectorMark(
                angle: .value("Share", slice.value),
                innerRadius: .ratio(0.62),      // the "donut" hole
                angularInset: 1.5
            )
            .cornerRadius(4)
            .foregroundStyle(by: .value("Source", slice.name))
        }
        .frame(height: 220)
    }
}

struct SparklineRow: View {
    let title: String
    let values: [Double]
    let delta: String
    let isUp: Bool

    var body: some View {
        HStack(spacing: 12) {
            Text(title).font(.subheadline).foregroundStyle(.secondary)

            Chart(Array(values.enumerated()), id: \.offset) { index, value in
                LineMark(x: .value("i", index), y: .value("v", value))
                    .interpolationMethod(.catmullRom)
            }
            .foregroundStyle(isUp ? .green : .red)
            .chartXAxis(.hidden)          // a sparkline has no axes
            .chartYAxis(.hidden)
            .frame(width: 110, height: 38)

            Text(delta).font(.subheadline.weight(.semibold)).monospacedDigit()
        }
    }
}