Connect with us


Sankey – Sankey diagrams in SwiftUI

Sankey diagrams in SwiftUI, powered by Google Charts. Sankey diagrams are a type of flow diagram in which the width of the arrows is proportional to the flow rate. Sankey diagrams can also visualize the energy accounts, material flow accounts on a regional or national level, and cost breakdowns.


Make interactive charts like this:

With code as simple as this:

import Sankey
import SwiftUI

struct ReadMeView: View {
    // Create some data
    @State var data: [SankeyLink] = [
        // Option A: ExpressibleByArrayLiteral
        ["A", "X", "5"],
        ["A", "Y", "7"],
        ["A", "Z", "6"],
        ["B", "X", "2"],
        ["B", "Y", "9"],
        ["B", "Z", "4"]

    var body: some View {
        GeometryReader { geo in
            VStack(spacing: 20) {
                Text("Sankeys in SwiftUI!")
                    .padding(.top, 20)
                // Native SwiftUI Component
                    nodeLabelFontSize: 50,
                    nodeInteractivity: true,
                    linkColorMode: .gradient,
                    tooltipTextFontSize: 50
                // Will take up full View, unless you constrain it...
                .frame(height: geo.size.height * 0.5)
                Button {
                        // Option B: Struct
                        SankeyLink(source: "C", target: "X", value: 3)
                } label: {
                    Text("Add a new link")
                Text("Lorem Ipsum...")
Sankey at GitHub:
Platform: iOS
⭐️: 3