fix: BarChartCellShape to handle negative numbers correctly

* feat: add linechart interaction point

* feat: add ability to show current data point on linechart

.swiftpm/xcode/xcuserdata/samuandras.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>SchemeUserState</key>
+	<dict>
+		<key>SwiftUICharts.xcscheme_^#shared#^_</key>
+		<dict>
+			<key>orderHint</key>
+			<integer>2</integer>
+		</dict>
+	</dict>
+</dict>
+</plist>

.swiftpm/xcode/xcuserdata/samuandris.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Bucket
+   uuid = "91E23D30-CB6C-44DA-BEFC-9D39A1DA2242"
+   type = "1"
+   version = "2.0">
+</Bucket>

.swiftpm/xcode/xcuserdata/samuandris.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -7,7 +7,20 @@
 		<key>SwiftUICharts.xcscheme_^#shared#^_</key>
 		<dict>
 			<key>orderHint</key>
-			<integer>1</integer>
+			<integer>0</integer>
+		</dict>
+	</dict>
+	<key>SuppressBuildableAutocreation</key>
+	<dict>
+		<key>SwiftUICharts</key>
+		<dict>
+			<key>primary</key>
+			<true/>
+		</dict>
+		<key>SwiftUIChartsTests</key>
+		<dict>
+			<key>primary</key>
+			<true/>
 		</dict>
 	</dict>
 </dict>

Sources/SwiftUICharts/Base/CardView/CardView.swift

@@ -1,23 +1,37 @@
 import SwiftUI
 
-public struct CardView<Content: View>: View {
-    @Environment(\.chartStyle) private var chartStyle
-
+/// View containing data and some kind of chart content
+public struct CardView<Content: View>: View, ChartBase {
+    public var chartData = ChartData()
     let content: () -> Content
 
-    public init(@ViewBuilder content: @escaping () -> Content) {
+    private var showShadow: Bool
+
+    @EnvironmentObject var style: ChartStyle
+
+	/// Initialize with view options and a nested `ViewBuilder`
+	/// - Parameters:
+	///   - showShadow: should card have a rounded-rectangle shadow around it
+	///   - content: <#content description#>
+    public init(showShadow: Bool = true, @ViewBuilder content: @escaping () -> Content) {
+        self.showShadow = showShadow
         self.content = content
     }
 
+	/// The content and behavior of the `CardView`.
+	///
+	///
     public var body: some View {
         ZStack{
-            Rectangle()
-                .fill(self.chartStyle.backgroundColor.linearGradient(from: .bottom, to: .top))
-                .cornerRadius(20)
-                .shadow(color: Color.gray, radius: 8)
-            VStack {
+            if showShadow {
+                RoundedRectangle(cornerRadius: 20)
+                    .fill(Color.white)
+                    .shadow(color: Color(white: 0.9, opacity: 1), radius: 8)
+            }
+            VStack (alignment: .leading) {
                 self.content()
             }
+            .clipShape(RoundedRectangle(cornerRadius: showShadow ? 20 : 0))
         }
     }
 }

Sources/SwiftUICharts/Base/Chart/AnyChartType.swift

@@ -1,19 +0,0 @@
-import SwiftUI
-
-struct AnyChartType: ChartType {
-    private let chartMaker: (ChartType.Data, ChartType.Style) -> AnyView
-
-    init<S: ChartType>(_ type: S) {
-        self.chartMaker = type.makeTypeErasedBody
-    }
-
-    func makeChart(data: ChartType.Data, style: ChartType.Style) -> AnyView {
-        self.chartMaker(data, style)
-    }
-}
-
-fileprivate extension ChartType {
-    func makeTypeErasedBody(data: ChartType.Data, style: ChartType.Style) -> AnyView {
-        AnyView(makeChart(data: data, style: style))
-    }
-}

Sources/SwiftUICharts/Base/Chart/ChartBase.swift

@@ -0,0 +1,6 @@
+import SwiftUI
+
+/// Protocol for any type of chart, to get access to underlying data
+public protocol ChartBase {
+    var chartData: ChartData { get }
+}

Sources/SwiftUICharts/Base/Chart/ChartData.swift

@@ -1,9 +1,41 @@
 import SwiftUI
 
+/// An observable wrapper for an array of data for use in any chart
 public class ChartData: ObservableObject {
-    @Published public var data: [Double] = []
+    @Published public var data: [(String, Double)] = []
 
+    var points: [Double] {
+        data.map { $0.1 }
+    }
+
+    var values: [String] {
+        data.map { $0.0 }
+    }
+
+    var normalisedPoints: [Double] {
+        let absolutePoints = points.map { abs($0) }
+        return points.map { $0 / (absolutePoints.max() ?? 1.0) }
+    }
+
+    var normalisedRange: Double {
+        (normalisedPoints.max() ?? 0.0) - (normalisedPoints.min() ?? 0.0)
+    }
+
+    var isInNegativeDomain: Bool {
+        (points.min() ?? 0.0) < 0
+    }
+
+    /// Initialize with data array
+    /// - Parameter data: Array of `Double`
     public init(_ data: [Double]) {
+        self.data = data.map { ("", $0) }
+    }
+
+    public init(_ data: [(String, Double)]) {
         self.data = data
     }
+
+    public init() {
+        self.data = []
+    }
 }

Sources/SwiftUICharts/Base/Chart/ChartType.swift

@@ -1,11 +0,0 @@
-import SwiftUI
-
-@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
-public protocol ChartType {
-    associatedtype Body: View
-
-    func makeChart(data: Self.Data, style: Self.Style) -> Self.Body
-
-    typealias Data = ChartData
-    typealias Style = ChartStyle
-}

Sources/SwiftUICharts/Base/Chart/ChartValue.swift

@@ -0,0 +1,7 @@
+import SwiftUI
+
+/// Representation of a single data point in a chart that is being observed
+public class ChartValue: ObservableObject {
+    @Published var currentValue: Double = 0
+    @Published var interactionInProgress: Bool = false
+}

Sources/SwiftUICharts/Base/ChartView.swift

@@ -1,27 +0,0 @@
-//  ChartView.swift
-//  Created by Samu András on 2020. 05. 22..
-
-import SwiftUI
-
-public struct ChartView: View {
-    @Environment(\.chartType) private var chartType
-    @Environment(\.chartStyle) private var chartStyle
-
-    private var data: ChartData
-
-    public init(data: ChartData) {
-        self.data = data
-    }
-
-    public var body: some View {
-        self.chartType.makeChart(data: data, style: chartStyle)
-    }
-}
-
-extension ChartView {
-//    public init(data: [Double]) {
-//        self.configuration = ChartTypeConfiguration(data: data)
-//    }
-
-
-}

Sources/SwiftUICharts/Base/Extensions/Array+Extension.swift

@@ -1,13 +1,10 @@
-//
-//  File.swift
-//  
-//
-//  Created by Nicolas Savoini on 2020-05-25.
-//
-
 import Foundation
 
 extension Array where Element == ColorGradient {
+	
+	/// <#Description#>
+	/// - Parameter index: offset in data table
+	/// - Returns: <#description#>
     func rotate(for index: Int) -> ColorGradient {
         if self.isEmpty {
             return ColorGradient.orangeBright

Sources/SwiftUICharts/Base/Extensions/CGPoint+Extension.swift

@@ -1,8 +1,14 @@
 import SwiftUI
 
 extension CGPoint {
+	
+	/// Calculate X and Y delta for each data point, based on data min/max and enclosing frame.
+	/// - Parameters:
+	///   - frame: Rectangle of enclosing frame
+	///   - data: array of `Double`
+	/// - Returns: X and Y delta as a `CGPoint`
     static func getStep(frame: CGRect, data: [Double]) -> CGPoint {
-        let padding: CGFloat = 30.0
+        let padding: CGFloat = 0
 
         // stepWidth
         var stepWidth: CGFloat = 0.0
@@ -32,4 +38,10 @@ extension CGPoint {
 
         return CGPoint(x: stepWidth, y: stepHeight)
     }
+    
+    func denormalize(with geometry: GeometryProxy) -> CGPoint {
+        let width = geometry.frame(in: .local).width
+        let height = geometry.frame(in: .local).height
+        return CGPoint(x: self.x * width, y: self.y * height)
+    }
 }

Sources/SwiftUICharts/Base/Extensions/CGRect+Extension.swift

@@ -1,15 +1,10 @@
-//
-//  CGRect+Extension.swift
-//  SwiftUICharts
-//
-//  Created by Nicolas Savoini on 2020-05-24.
-//
-
 import Foundation
 import SwiftUI
 
 extension CGRect {
-    // Return the coordinate for a rectangle center
+
+	/// Midpoint of rectangle
+	/// - Returns: the coordinate for a rectangle center
     public var mid: CGPoint {
         return CGPoint(x: self.midX, y: self.midY)
     }

Sources/SwiftUICharts/Base/Extensions/ChartBase+Extension.swift

@@ -0,0 +1,21 @@
+import SwiftUI
+
+extension View where Self: ChartBase {
+	
+	/// Set data for a chart
+	/// - Parameter data: array of `Double`
+	/// - Returns: modified `View` with data attached
+    public func data(_ data: [Double]) -> some View {
+        chartData.data = data.map { ("", $0) }
+        return self
+            .environmentObject(chartData)
+            .environmentObject(ChartValue())
+    }
+
+    public func data(_ data: [(String, Double)]) -> some View {
+        chartData.data = data
+        return self
+            .environmentObject(chartData)
+            .environmentObject(ChartValue())
+    }
+}

Sources/SwiftUICharts/Base/Extensions/Color+Extension.swift

@@ -1,6 +1,8 @@
 import SwiftUI
 
 extension Color {
+	/// Create a `Color` from a hexadecimal representation
+	/// - Parameter hexString: 3, 6, or 8-character string, with optional (ignored) punctuation such as "#"
     init(hexString: String) {
         let hex = hexString.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
         var int = UInt64()

Sources/SwiftUICharts/Base/Extensions/Path+QuadCurve.swift

@@ -1,23 +1,37 @@
 import SwiftUI
 
 extension Path {
+
+	/// Returns a tiny segment of path based on percentage along the path
+	///
+	/// TODO: Explain why more than 1 gets 0 and why less than 0 gets 1
+	/// - Parameter percent: fraction along data set, between 0.0 and 1.0 (underflow and overflow are handled)
+	/// - Returns: tiny path right around the requested fraction
     func trimmedPath(for percent: CGFloat) -> Path {
-        // percent difference between points
         let boundsDistance: CGFloat = 0.001
         let completion: CGFloat = 1 - boundsDistance
         
         let pct = percent > 1 ? 0 : (percent < 0 ? 1 : percent)
-        
+
+		// Start/end points centered around given percentage, but capped if right at the very end
         let start = pct > completion ? completion : pct - boundsDistance
         let end = pct > completion ? 1 : pct + boundsDistance
         return trimmedPath(from: start, to: end)
     }
-    
+
+	/// Find the `CGPoint` for the given fraction along the path.
+	///
+	/// This works by requesting a very tiny trimmed section of the path, then getting the center of the bounds rectangle
+	/// - Parameter percent: fraction along data set, between 0.0 and 1.0 (underflow and overflow are handled)
+	/// - Returns: a `CGPoint` representing the location of that section of the path
     func point(for percent: CGFloat) -> CGPoint {
         let path = trimmedPath(for: percent)
         return CGPoint(x: path.boundingRect.midX, y: path.boundingRect.midY)
     }
-    
+
+	/// <#Description#>
+	/// - Parameter maxX: <#maxX description#>
+	/// - Returns: <#description#>
     func point(to maxX: CGFloat) -> CGPoint {
         let total = length
         let sub = length(to: maxX)
@@ -25,7 +39,9 @@ extension Path {
         return point(for: percent)
     }
     
-    var length: CGFloat {
+	/// <#Description#>
+	/// - Returns: <#description#>
+   var length: CGFloat {
         var ret: CGFloat = 0.0
         var start: CGPoint?
         var point = CGPoint.zero
@@ -56,7 +72,10 @@ extension Path {
         }
         return ret
     }
-    
+
+	/// <#Description#>
+	/// - Parameter maxX: <#maxX description#>
+	/// - Returns: <#description#>
     func length(to maxX: CGFloat) -> CGFloat {
         var ret: CGFloat = 0.0
         var start: CGPoint?
@@ -107,7 +126,13 @@ extension Path {
         }
         return ret
     }
-    
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - points: <#points description#>
+	///   - step: <#step description#>
+	///   - globalOffset: <#globalOffset description#>
+	/// - Returns: <#description#>
     static func quadCurvedPathWithPoints(points: [Double], step: CGPoint, globalOffset: Double? = nil) -> Path {
         var path = Path()
         if points.count < 2 {
@@ -126,7 +151,13 @@ extension Path {
         }
         return path
     }
-    
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - points: <#points description#>
+	///   - step: <#step description#>
+	///   - globalOffset: <#globalOffset description#>
+	/// - Returns: <#description#>
     static func quadClosedCurvedPathWithPoints(points: [Double], step: CGPoint, globalOffset: Double? = nil) -> Path {
         var path = Path()
         if points.count < 2 {
@@ -149,7 +180,12 @@ extension Path {
         path.closeSubpath()
         return path
     }
-    
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - points: <#points description#>
+	///   - step: <#step description#>
+	/// - Returns: <#description#>
     static func linePathWithPoints(points: [Double], step: CGPoint) -> Path {
         var path = Path()
         if points.count < 2 {
@@ -166,7 +202,12 @@ extension Path {
         }
         return path
     }
-    
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - points: <#points description#>
+	///   - step: <#step description#>
+	/// - Returns: <#description#>
     static func closedLinePathWithPoints(points: [Double], step: CGPoint) -> Path {
         var path = Path()
         if points.count < 2 {
@@ -189,20 +230,39 @@ extension Path {
 }
 
 extension CGPoint {
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - to: <#to description#>
+	///   - x: <#x description#>
+	/// - Returns: <#description#>
     func point(to: CGPoint, x: CGFloat) -> CGPoint {
         let a = (to.y - self.y) / (to.x - self.x)
         let y = self.y + (x - self.x) * a
         return CGPoint(x: x, y: y)
     }
-    
+
+	/// <#Description#>
+	/// - Parameter to: <#to description#>
+	/// - Returns: <#description#>
     func line(to: CGPoint) -> CGFloat {
         dist(to: to)
     }
-    
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - to: <#to description#>
+	///   - x: <#x description#>
+	/// - Returns: <#description#>
     func line(to: CGPoint, x: CGFloat) -> CGFloat {
         dist(to: point(to: to, x: x))
     }
-    
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - to: <#to description#>
+	///   - control: <#control description#>
+	/// - Returns: <#description#>
     func quadCurve(to: CGPoint, control: CGPoint) -> CGFloat {
         var dist: CGFloat = 0
         let steps: CGFloat = 100
@@ -217,7 +277,13 @@ extension CGPoint {
         }
         return dist
     }
-    
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - to: <#to description#>
+	///   - control: <#control description#>
+	///   - x: <#x description#>
+	/// - Returns: <#description#>
     func quadCurve(to: CGPoint, control: CGPoint, x: CGFloat) -> CGFloat {
         var dist: CGFloat = 0
         let steps: CGFloat = 100
@@ -242,14 +308,26 @@ extension CGPoint {
         }
         return dist
     }
-    
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - to: <#to description#>
+	///   - t: <#t description#>
+	///   - control: <#control description#>
+	/// - Returns: <#description#>
     func point(to: CGPoint, t: CGFloat, control: CGPoint) -> CGPoint {
         let x = CGPoint.value(x: self.x, y: to.x, t: t, c: control.x)
         let y = CGPoint.value(x: self.y, y: to.y, t: t, c: control.y)
         
         return CGPoint(x: x, y: y)
     }
-    
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - to: <#to description#>
+	///   - control1: <#control1 description#>
+	///   - control2: <#control2 description#>
+	/// - Returns: <#description#>
     func curve(to: CGPoint, control1: CGPoint, control2: CGPoint) -> CGFloat {
         var dist: CGFloat = 0
         let steps: CGFloat = 100
@@ -266,7 +344,14 @@ extension CGPoint {
         
         return dist
     }
-    
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - to: <#to description#>
+	///   - control1: <#control1 description#>
+	///   - control2: <#control2 description#>
+	///   - x: <#x description#>
+	/// - Returns: <#description#>
     func curve(to: CGPoint, control1: CGPoint, control2: CGPoint, x: CGFloat) -> CGFloat {
         var dist: CGFloat = 0
         let steps: CGFloat = 100
@@ -293,14 +378,28 @@ extension CGPoint {
         
         return dist
     }
-    
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - to: <#to description#>
+	///   - t: <#t description#>
+	///   - control1: <#control1 description#>
+	///   - control2: <#control2 description#>
+	/// - Returns: <#description#>
     func point(to: CGPoint, t: CGFloat, control1: CGPoint, control2: CGPoint) -> CGPoint {
         let x = CGPoint.value(x: self.x, y: to.x, t: t, control1: control1.x, control2: control2.x)
         let y = CGPoint.value(x: self.y, y: to.y, t: t, control1: control1.y, control2: control2.x)
         
         return CGPoint(x: x, y: y)
     }
-    
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - x: <#x description#>
+	///   - y: <#y description#>
+	///   - t: <#t description#>
+	///   - c: <#c description#>
+	/// - Returns: <#description#>
     static func value(x: CGFloat, y: CGFloat, t: CGFloat, c: CGFloat) -> CGFloat {
         var value: CGFloat = 0.0
         // (1-t)^2 * p0 + 2 * (1-t) * t * c1 + t^2 * p1
@@ -309,7 +408,15 @@ extension CGPoint {
         value += pow(t, 2) * y
         return value
     }
-    
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - x: <#x description#>
+	///   - y: <#y description#>
+	///   - t: <#t description#>
+	///   - control1: <#control1 description#>
+	///   - control2: <#control2 description#>
+	/// - Returns: <#description#>
     static func value(x: CGFloat, y: CGFloat, t: CGFloat, control1: CGFloat, control2: CGFloat) -> CGFloat {
         var value: CGFloat = 0.0
         // (1-t)^3 * p0 + 3 * (1-t)^2 * t * c1 + 3 * (1-t) * t^2 * c2 + t^3 * p1
@@ -319,24 +426,42 @@ extension CGPoint {
         value += pow(t, 3) * y
         return value
     }
-    
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - point1: <#point1 description#>
+	///   - point2: <#point2 description#>
+	/// - Returns: <#description#>
     static func getMidPoint(point1: CGPoint, point2: CGPoint) -> CGPoint {
         return CGPoint(
             x: point1.x + (point2.x - point1.x) / 2,
             y: point1.y + (point2.y - point1.y) / 2
         )
     }
-    
+
+	/// <#Description#>
+	/// - Parameter to: <#to description#>
+	/// - Returns: <#description#>
     func dist(to: CGPoint) -> CGFloat {
         return sqrt((pow(self.x - to.x, 2) + pow(self.y - to.y, 2)))
     }
-    
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - firstPoint: <#firstPoint description#>
+	///   - secondPoint: <#secondPoint description#>
+	/// - Returns: <#description#>
     static func midPointForPoints(firstPoint: CGPoint, secondPoint: CGPoint) -> CGPoint {
         return CGPoint(
             x: (firstPoint.x + secondPoint.x) / 2,
             y: (firstPoint.y + secondPoint.y) / 2)
     }
-    
+
+	/// <#Description#>
+	/// - Parameters:
+	///   - firstPoint: <#firstPoint description#>
+	///   - secondPoint: <#secondPoint description#>
+	/// - Returns: <#description#>
     static func controlPointForPoints(firstPoint: CGPoint, secondPoint: CGPoint) -> CGPoint {
         var controlPoint = CGPoint.midPointForPoints(firstPoint: firstPoint, secondPoint: secondPoint)
         let diffY = abs(secondPoint.y - controlPoint.y)

Sources/SwiftUICharts/Base/Extensions/View+Extension.swift

@@ -1,11 +1,11 @@
 import SwiftUI
 
 extension View {
-    public func type<S>(_ type: S) -> some View where S: ChartType {
-        self.environment(\.chartType, AnyChartType(type))
-    }
 
-    public func style(_ style: ChartStyle) -> some View {
-        self.environment(\.chartStyle, style)
+	/// Attach chart style to a View
+	/// - Parameter style: chart style
+	/// - Returns: `View` with chart style attached
+    public func chartStyle(_ style: ChartStyle) -> some View {
+        self.environmentObject(style)
     }
 }

Sources/SwiftUICharts/Base/Grid/ChartGrid.swift

@@ -0,0 +1,53 @@
+import SwiftUI
+
+public struct ChartGrid<Content: View>: View, ChartBase {
+    public var chartData = ChartData()
+    let content: () -> Content
+    let numberOfHorizontalLines = 4
+
+    @EnvironmentObject var data: ChartData
+    @EnvironmentObject var style: ChartStyle
+
+    public init(@ViewBuilder content: @escaping () -> Content) {
+        self.content = content
+    }
+
+    public var body: some View {
+        HStack {
+            ZStack {
+                VStack {
+                    ForEach(0..<numberOfHorizontalLines) { _ in 
+                        GridElement()
+                        Spacer()
+                    }
+                }
+                self.content()
+            }
+        }
+    }
+}
+
+struct GridElement: View {
+    var body: some View {
+        DashedLine()
+            .frame(maxHeight: 2, alignment: .center)
+    }
+}
+
+struct DashedLine: View {
+    func line(frame: CGRect) -> Path {
+        let baseLine: CGFloat = CGFloat(frame.height / 2)
+        var hLine = Path()
+        hLine.move(to: CGPoint(x:0, y: baseLine))
+        hLine.addLine(to: CGPoint(x: frame.width, y: baseLine))
+        return hLine
+    }
+
+    var body: some View {
+        GeometryReader { geometry in
+            line(frame: geometry.frame(in: .local))
+                .stroke(Color(white: 0.85), style: StrokeStyle(lineWidth: 1, lineCap: .round, dash: [5, 10]))
+        }
+    }
+}
+

Sources/SwiftUICharts/Base/Label/ChartLabel.swift

@@ -1,43 +1,107 @@
 import SwiftUI
 
-public enum ChartLabelSize: CGFloat {
-    case small = 16.0
-    case normal = 24.0
-    case large = 32.0
-}
-
+/// What kind of label - this affects color, size, position of the label
 public enum ChartLabelType {
     case title
+    case subTitle
+    case largeTitle
+    case custom(size: CGFloat, padding: EdgeInsets, color: Color)
     case legend
 }
 
+/// A chart may contain any number of labels in pre-set positions based on their `ChartLabelType`
 public struct ChartLabel: View {
-    private let text: String
-    private let labelSize: ChartLabelSize
-    private let labelType: ChartLabelType
+    @EnvironmentObject var chartValue: ChartValue
+    @State var textToDisplay:String = ""
+    var format: String = "%.01f"
 
-    private var labelColor: Color {
+    private var title: String
+
+	/// Label font size
+	/// - Returns: the font size of the label
+    private var labelSize: CGFloat {
         switch labelType {
         case .title:
-            return .black
+            return 32.0
         case .legend:
-            return .gray
+            return 14.0
+        case .subTitle:
+            return 24.0
+        case .largeTitle:
+            return 38.0
+        case .custom(let size, _, _):
+            return size
         }
     }
 
-    public init (_ text: String,
-                 type: ChartLabelType = .title,
-                 size: ChartLabelSize = .normal) {
-        self.text = text
-        labelType = type
-        labelSize = size
+	/// Padding around label
+	/// - Returns: the edge padding to use based on position of the label
+    private var labelPadding: EdgeInsets {
+        switch labelType {
+        case .title:
+            return EdgeInsets(top: 16.0, leading: 8.0, bottom: 0.0, trailing: 8.0)
+        case .legend:
+            return EdgeInsets(top: 4.0, leading: 8.0, bottom: 0.0, trailing: 8.0)
+        case .subTitle:
+            return EdgeInsets(top: 8.0, leading: 8.0, bottom: 0.0, trailing: 8.0)
+        case .largeTitle:
+            return EdgeInsets(top: 24.0, leading: 8.0, bottom: 0.0, trailing: 8.0)
+        case .custom(_, let padding, _):
+            return padding
+        }
     }
 
+	/// Which type (color, size, position) for label
+    private let labelType: ChartLabelType
+
+	/// Foreground color for this label
+	/// - Returns: Color of label based on its `ChartLabelType`
+    private var labelColor: Color {
+        switch labelType {
+        case .title:
+            return Color(UIColor.label)
+        case .legend:
+            return Color(UIColor.secondaryLabel)
+        case .subTitle:
+            return Color(UIColor.label)
+        case .largeTitle:
+            return Color(UIColor.label)
+        case .custom(_, _, let color):
+            return color
+        }
+    }
+
+	/// Initialize
+	/// - Parameters:
+	///   - title: Any `String`
+	///   - type: Which `ChartLabelType` to use
+    public init (_ title: String,
+                 type: ChartLabelType = .title,
+                 format: String = "%.01f") {
+        self.title = title
+        labelType = type
+        self.format = format
+    }
+
+	/// The content and behavior of the `ChartLabel`.
+	///
+	/// Displays current value if chart is currently being touched along a data point, otherwise the specified text.
     public var body: some View {
-        Text(self.text)
-            .font(.system(size: labelSize.rawValue))
-            .bold()
-            .foregroundColor(self.labelColor)
-            .padding([.top, .bottom], 16.0)
+        HStack {
+            Text(textToDisplay)
+                .font(.system(size: labelSize))
+                .bold()
+                .foregroundColor(self.labelColor)
+                .padding(self.labelPadding)
+                .onAppear {
+                    self.textToDisplay = self.title
+                }
+                .onReceive(self.chartValue.objectWillChange) { _ in
+                    self.textToDisplay = self.chartValue.interactionInProgress ? String(format: format, self.chartValue.currentValue) : self.title
+                }
+            if !self.chartValue.interactionInProgress {
+                Spacer()
+            }
+        }
     }
 }

Sources/SwiftUICharts/Base/Style/ChartStyle.swift

@@ -1,25 +1,44 @@
 import SwiftUI
 
-public struct ChartStyle {
+/// Descripton of colors/styles for any kind of chart
+public class ChartStyle: ObservableObject {
 
-    public let backgroundColor: ColorGradient
+	/// colors for background are of chart
+	public let backgroundColor: ColorGradient
+	/// colors for foreground fill of chart
     public let foregroundColor: [ColorGradient]
 
+	/// Initialize with a single background color and an array of `ColorGradient` for the foreground
+	/// - Parameters:
+	///   - backgroundColor: a `Color`
+	///   - foregroundColor: array of `ColorGradient`
     public init(backgroundColor: Color, foregroundColor: [ColorGradient]) {
         self.backgroundColor = ColorGradient.init(backgroundColor)
         self.foregroundColor = foregroundColor
     }
-    
+
+	/// Initialize with a single background color and a single `ColorGradient` for the foreground
+	/// - Parameters:
+	///   - backgroundColor: a `Color`
+	///   - foregroundColor: a `ColorGradient`
     public init(backgroundColor: Color, foregroundColor: ColorGradient) {
         self.backgroundColor = ColorGradient.init(backgroundColor)
         self.foregroundColor = [foregroundColor]
     }
-    
+
+	/// Initialize with a single background `ColorGradient` and a single `ColorGradient` for the foreground
+	/// - Parameters:
+	///   - backgroundColor: a `ColorGradient`
+	///   - foregroundColor: a `ColorGradient`
     public init(backgroundColor: ColorGradient, foregroundColor: ColorGradient) {
         self.backgroundColor = backgroundColor
         self.foregroundColor = [foregroundColor]
     }
-    
+
+	/// Initialize with a  single background `ColorGradient` and an array of `ColorGradient` for the foreground
+	/// - Parameters:
+	///   - backgroundColor: a `ColorGradient`
+	///   - foregroundColor: array of `ColorGradient`
     public init(backgroundColor: ColorGradient, foregroundColor: [ColorGradient]) {
         self.backgroundColor = backgroundColor
         self.foregroundColor = foregroundColor

Sources/SwiftUICharts/Base/Style/ColorGradient.swift

@@ -1,26 +1,35 @@
 import SwiftUI
 
+/// An encapsulation of a simple gradient between one color and another
 public struct ColorGradient: Equatable {
-    public let startColor: Color
+	public let startColor: Color
     public let endColor: Color
 
+	/// Initialize as a solid color
+	/// - Parameter color: a  single `Color` (no gradient effect visible)
     public init(_ color: Color) {
         self.startColor = color
         self.endColor = color
     }
-    
-    public init (_ startColor: Color, _ endColor: Color) {
+
+	/// Initialize a color gradient from two specified colors
+	/// - Parameters:
+	///   - startColor: starting color
+	///   - endColor: ending color
+    public init(_ startColor: Color, _ endColor: Color) {
         self.startColor = startColor
         self.endColor = endColor
     }
 
+	/// Convert to a  `Gradient` object (more complicated than just two colors)
+	/// - Returns: a `Gradient` between the specified start and end colors
     public var gradient: Gradient {
         return Gradient(colors: [startColor, endColor])
     }
 }
 
 extension ColorGradient {
-    /// Convenience method to return a LinearGradient from the ColorGradient
+    /// Convenience method to return a SwiftUI LinearGradient view from the ColorGradient
     /// - Parameters:
     ///   - startPoint: starting point
     ///   - endPoint: ending point

Sources/SwiftUICharts/Base/Style/Colors.swift

@@ -1,10 +1,11 @@
 import SwiftUI
 
+/// Some predefined colors, used for demos, defaults if color is missing, and data indicator point
 public enum ChartColors {
     // Orange
-    static let orangeBright = Color(hexString: "#FF782C")
-    static let orangeDark = Color(hexString: "#EC2301")
+    public static let orangeBright = Color(hexString: "#FF782C")
+    public static let orangeDark = Color(hexString: "#EC2301")
 
-    static let legendColor: Color = Color(hexString: "#E8E7EA")
-    static let indicatorKnob: Color = Color(hexString: "#FF57A6")
+    public static let legendColor: Color = Color(hexString: "#E8E7EA")
+    public static let indicatorKnob: Color = Color(hexString: "#FF57A6")
 }

Sources/SwiftUICharts/Charts/BarChart/BarChart.swift

@@ -1,30 +1,18 @@
 import SwiftUI
 
-public struct BarChart: ChartType {
-    public func makeChart(data: Self.Data, style: Self.Style) -> some View {
+/// A type of chart that displays vertical bars for each data point
+public struct BarChart: View, ChartBase {
+    public var chartData = ChartData()
+
+    @EnvironmentObject var data: ChartData
+    @EnvironmentObject var style: ChartStyle
+
+	/// The content and behavior of the `BarChart`.
+	///
+	///
+    public var body: some View {
         BarChartRow(chartData: data, style: style)
     }
+
     public init() {}
 }
-
-struct BarChart_Previews: PreviewProvider {
-    static var previews: some View {
-        Group {
-            BarChart().makeChart(
-            data: .init([0]),
-            style: .init(backgroundColor: .white, foregroundColor: ColorGradient.redBlack))
-            Group {
-                BarChart().makeChart(
-                    data: .init([1, 2, 3, 5, 1]),
-                    style: .init(backgroundColor: .white, foregroundColor: ColorGradient.redBlack))
-            }.environment(\.colorScheme, .light)
-        
-            Group {
-                BarChart().makeChart(
-                data: .init([1, 2, 3]),
-                style: .init(backgroundColor: .white, foregroundColor: ColorGradient.redBlack))
-            }.environment(\.colorScheme, .dark)
-        
-        }
-    }
-}

Sources/SwiftUICharts/Charts/BarChart/BarChartCell.swift

@@ -1,48 +1,37 @@
 import SwiftUI
 
+/// A single vertical bar in a `BarChart`
 public struct BarChartCell: View {
     var value: Double
     var index: Int = 0
-    var width: Float
-    var numberOfDataPoints: Int
     var gradientColor: ColorGradient
     var touchLocation: CGFloat
 
-    var cellWidth: Double {
-        return Double(width)/(Double(numberOfDataPoints) * 1.5)
-    }
-
-    @State var firstDisplay: Bool = true
+    @State private var didCellAppear: Bool = false
 
     public init( value: Double,
                  index: Int = 0,
-                 width: Float,
-                 numberOfDataPoints: Int,
                  gradientColor: ColorGradient,
                  touchLocation: CGFloat) {
         self.value = value
         self.index = index
-        self.width = width
-        self.numberOfDataPoints = numberOfDataPoints
         self.gradientColor = gradientColor
         self.touchLocation = touchLocation
     }
 
+	/// The content and behavior of the `BarChartCell`.
+	///
+	/// Animated when first displayed, using the `firstDisplay` variable, with an increasing delay through the data set.
     public var body: some View {
-        ZStack {
-            RoundedRectangle(cornerRadius: 4)
-                .fill(gradientColor.linearGradient(from: .bottom, to: .top))
-        }
-        .frame(width: CGFloat(self.cellWidth))
-        .scaleEffect(CGSize(width: 1, height: self.firstDisplay ? 0.0 : self.value), anchor: .bottom)
-        .onAppear {
-            self.firstDisplay = false
+        BarChartCellShape(value: didCellAppear ? value : 0.0)
+        .fill(gradientColor.linearGradient(from: .bottom, to: .top))        .onAppear {
+            self.didCellAppear = true
         }
         .onDisappear {
-            self.firstDisplay = true
+            self.didCellAppear = false
         }
         .transition(.slide)
-        .animation(Animation.spring().delay(self.touchLocation < 0 || !firstDisplay ? Double(self.index) * 0.04 : 0))
+        .animation(Animation.spring().delay(self.touchLocation < 0 || !didCellAppear ? Double(self.index) * 0.04 : 0))
     }
 }
 
@@ -50,17 +39,17 @@ struct BarChartCell_Previews: PreviewProvider {
     static var previews: some View {
         Group {
             Group {
-                BarChartCell(value: 0, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient.greenRed, touchLocation: CGFloat())
+                BarChartCell(value: 0, gradientColor: ColorGradient.greenRed, touchLocation: CGFloat())
 
-                BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient.greenRed, touchLocation: CGFloat())
-                BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient.whiteBlack, touchLocation: CGFloat())
-                BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient(.purple), touchLocation: CGFloat())
+                BarChartCell(value: 0.5, gradientColor: ColorGradient.greenRed, touchLocation: CGFloat())
+                BarChartCell(value: 0.75, gradientColor: ColorGradient.whiteBlack, touchLocation: CGFloat())
+                BarChartCell(value: 1, gradientColor: ColorGradient(.purple), touchLocation: CGFloat())
             }
 
             Group {
-                BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient.greenRed, touchLocation: CGFloat())
-                BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient.whiteBlack, touchLocation: CGFloat())
-                BarChartCell(value: 1, width: 50, numberOfDataPoints: 1, gradientColor: ColorGradient(.purple), touchLocation: CGFloat())
+                BarChartCell(value: 1, gradientColor: ColorGradient.greenRed, touchLocation: CGFloat())
+                BarChartCell(value: 1, gradientColor: ColorGradient.whiteBlack, touchLocation: CGFloat())
+                BarChartCell(value: 1, gradientColor: ColorGradient(.purple), touchLocation: CGFloat())
             }.environment(\.colorScheme, .dark)
         }
     }

Sources/SwiftUICharts/Charts/BarChart/BarChartCellShape.swift

@@ -0,0 +1,49 @@
+import SwiftUI
+
+struct BarChartCellShape: Shape, Animatable {
+    var value: Double
+    var cornerRadius: CGFloat = 6.0
+    
+    var animatableData: CGFloat {
+        get { CGFloat(value) }
+        set { value = Double(newValue) }
+    }
+
+    func path(in rect: CGRect) -> Path {
+        let adjustedOriginY = rect.height - (rect.height * CGFloat(value))
+        var path = Path()
+        path.move(to: CGPoint(x: 0.0 , y: rect.height))
+        path.addLine(to: CGPoint(x: 0.0, y: adjustedOriginY + cornerRadius))
+        path.addArc(center: CGPoint(x: cornerRadius, y: adjustedOriginY +  cornerRadius),
+                    radius: cornerRadius,
+                    startAngle: Angle(radians: Double.pi),
+                    endAngle: Angle(radians: value < 0 ? Double.pi/2 : -Double.pi/2),
+                    clockwise: value < 0 ? true : false)
+        path.addLine(to: CGPoint(x: rect.width - cornerRadius, y: value < 0 ? adjustedOriginY + 2 * cornerRadius : adjustedOriginY))
+        path.addArc(center: CGPoint(x: rect.width - cornerRadius, y: adjustedOriginY + cornerRadius),
+                    radius: cornerRadius,
+                    startAngle: Angle(radians: value < 0 ? Double.pi/2 : -Double.pi/2),
+                    endAngle: Angle(radians: 0),
+                    clockwise: value < 0 ? true : false)
+        path.addLine(to: CGPoint(x: rect.width, y: rect.height))
+        path.closeSubpath()
+
+        return path
+    }
+}
+
+struct BarChartCellShape_Previews: PreviewProvider {
+    static var previews: some View {
+        Group {
+            BarChartCellShape(value: 0.75)
+                .fill(Color.red)
+
+            BarChartCellShape(value: 0.3)
+                .fill(Color.blue)
+            
+            BarChartCellShape(value: -0.3)
+                .fill(Color.blue)
+                .offset(x: 0, y: -600)
+        }
+    }
+}

Sources/SwiftUICharts/Charts/BarChart/BarChartRow.swift

@@ -1,55 +1,62 @@
 import SwiftUI
 
+/// A single row of data, a view in a `BarChart`
 public struct BarChartRow: View {
+    @EnvironmentObject var chartValue: ChartValue
     @ObservedObject var chartData: ChartData
-    @State var touchLocation: CGFloat = -1.0
-
-    enum Constant {
-        static let spacing: CGFloat = 16.0
-    }
+    @State private var touchLocation: CGFloat = -1.0
 
     var style: ChartStyle
     
     var maxValue: Double {
-        guard let max = chartData.data.max() else {
+        guard let max = chartData.points.max() else {
             return 1
         }
         return max != 0 ? max : 1
     }
 
+	/// The content and behavior of the `BarChartRow`.
+	///
+	/// Shows each `BarChartCell` in an `HStack`; may be scaled up if it's the one currently being touched.
+	/// Not using a drawing group for optimizing animation.
+	/// As touched (dragged) the `touchLocation` is updated and the current value is highlighted.
     public var body: some View {
         GeometryReader { geometry in
             HStack(alignment: .bottom,
-                   spacing: (geometry.frame(in: .local).width - Constant.spacing) / CGFloat(self.chartData.data.count * 3)) {
-                    ForEach(0..<self.chartData.data.count, id: \.self) { index in
-                        BarChartCell(value: self.normalizedValue(index: index),
+                   spacing: geometry.frame(in: .local).width / CGFloat(chartData.data.count * 3)) {
+                    ForEach(0..<chartData.data.count, id: \.self) { index in
+                        BarChartCell(value: chartData.normalisedPoints[index],
                                      index: index,
-                                     width: Float(geometry.frame(in: .local).width - Constant.spacing),
-                                     numberOfDataPoints: self.chartData.data.count,
                                      gradientColor: self.style.foregroundColor.rotate(for: index),
                                      touchLocation: self.touchLocation)
                             .scaleEffect(self.getScaleSize(touchLocation: self.touchLocation, index: index), anchor: .bottom)
                             .animation(Animation.easeIn(duration: 0.2))
                     }
-//                   .drawingGroup()
+//                    .drawingGroup()
             }
-            .padding([.top, .leading, .trailing], 10)
+            .frame(maxHeight: chartData.isInNegativeDomain ? geometry.size.height / 2 : geometry.size.height)
             .gesture(DragGesture()
                 .onChanged({ value in
-                    self.touchLocation = value.location.x/geometry.frame(in: .local).width
+                    let width = geometry.frame(in: .local).width
+                    self.touchLocation = value.location.x/width
+                    if let currentValue = self.getCurrentValue(width: width) {
+                        self.chartValue.currentValue = currentValue
+                        self.chartValue.interactionInProgress = true
+                    }
                 })
                 .onEnded({ value in
+                    self.chartValue.interactionInProgress = false
                     self.touchLocation = -1
                 })
             )
         }
     }
-    
-    func normalizedValue(index: Int) -> Double {
-        print(chartData.data[index])
-        return Double(chartData.data[index])/Double(maxValue)
-    }
 
+	/// Size to scale the touch indicator
+	/// - Parameters:
+	///   - touchLocation: fraction of width where touch is happening
+	///   - index: index into data array
+	/// - Returns: a scale larger than 1.0 if in bounds; 1.0 (unscaled) if not in bounds
     func getScaleSize(touchLocation: CGFloat, index: Int) -> CGSize {
         if touchLocation > CGFloat(index)/CGFloat(chartData.data.count) &&
            touchLocation < CGFloat(index+1)/CGFloat(chartData.data.count) {
@@ -57,27 +64,21 @@ public struct BarChartRow: View {
         }
         return CGSize(width: 1, height: 1)
     }
-    
+
+	/// Get data value where touch happened
+	/// - Parameter width: width of chart
+	/// - Returns: value as `Double` if chart has data
+    func getCurrentValue(width: CGFloat) -> Double? {
+        guard self.chartData.data.count > 0 else { return nil}
+            let index = max(0,min(self.chartData.data.count-1,Int(floor((self.touchLocation*width)/(width/CGFloat(self.chartData.data.count))))))
+            return self.chartData.points[index]
+        }
 }
 
-//struct BarChartRow_Previews: PreviewProvider {
-//    static var previews: some View {
-//        Group {
-//            BarChartRow(data: [0], style: styleGreenRed)
-//            Group {
-//                BarChartRow(data: [1, 2, 3], style: styleGreenRed)
-//                BarChartRow(data: [1, 2, 3], style: styleGreenRedWhiteBlack)
-//            }
-//            Group {
-//                BarChartRow(data: [1, 2, 3], style: styleGreenRed)
-//                BarChartRow(data: [1, 2, 3], style: styleGreenRedWhiteBlack)
-//            }.environment(\.colorScheme, .dark)
-//        }
-//    }
-//}
-//
-//private let styleGreenRed = ChartStyle(backgroundColor: .white, foregroundColor: .greenRed)
-//
-//private let styleGreenRedWhiteBlack = ChartStyle(
-//    backgroundColor: ColorGradient.init(.white),
-//    foregroundColor: [ColorGradient.redBlack, ColorGradient.whiteBlack])
+struct BarChartRow_Previews: PreviewProvider {
+    static let chartData = ChartData([6, 2, 5, 8, 6])
+    static let chartStyle = ChartStyle(backgroundColor: .white, foregroundColor: .orangeBright)
+    static var previews: some View {
+        BarChartRow(chartData: chartData, style: chartStyle)
+    }
+}

Sources/SwiftUICharts/Charts/LineChart/IndicatorPoint.swift

@@ -1,15 +1,11 @@
-//
-//  IndicatorPoint.swift
-//  LineChart
-//
-//  Created by András Samu on 2019. 09. 03..
-//  Copyright © 2019. András Samu. All rights reserved.
-//
-
 import SwiftUI
 
+/// A dot representing a single data point as user moves finger over line in `LineChart`
 struct IndicatorPoint: View {
-    var body: some View {
+	/// The content and behavior of the `IndicatorPoint`.
+	///
+	/// A filled circle with a thick white outline and a shadow
+    public var body: some View {
         ZStack {
             Circle()
                 .fill(ChartColors.indicatorKnob)

Sources/SwiftUICharts/Charts/LineChart/Line.swift

@@ -1,69 +1,66 @@
 import SwiftUI
 
+/// A single line of data, a view in a `LineChart`
 public struct Line: View {
-    @State var frame: CGRect = .zero
+    @EnvironmentObject var chartValue: ChartValue
     @ObservedObject var chartData: ChartData
 
     var style: ChartStyle
 
-    @State var showIndicator: Bool = false
-    @State var touchLocation: CGPoint = .zero
-    @State private var showFull: Bool = false
-    @State var showBackground: Bool = true
+    @State private var showIndicator: Bool = false
+    @State private var touchLocation: CGPoint = .zero
+    @State private var showBackground: Bool = true
+    @State private var didCellAppear: Bool = false
+
     var curvedLines: Bool = true
-    var step: CGPoint {
-        return CGPoint.getStep(frame: frame, data: chartData.data)
-    }
-
     var path: Path {
-        let points = chartData.data
-
-        if curvedLines {
-            return Path.quadCurvedPathWithPoints(points: points,
-                                                 step: step,
-                                                 globalOffset: nil)
-        }
-
-        return Path.linePathWithPoints(points: points, step: step)
-    }
-    
-    var closedPath: Path {
-        let points = chartData.data
-
-        if curvedLines {
-            return Path.quadClosedCurvedPathWithPoints(points: points,
-                                            step: step,
-                                            globalOffset: nil)
-        }
-
-        return Path.closedLinePathWithPoints(points: points, step: step)
+        Path.quadCurvedPathWithPoints(points: chartData.normalisedPoints,
+                                      step: CGPoint(x: 1.0, y: 1.0))
     }
     
+	/// The content and behavior of the `Line`.
+	/// Draw the background if showing the full line (?) and the `showBackground` option is set. Above that draw the line, and then the data indicator if the graph is currently being touched.
+	/// On appear, set the frame so that the data graph metrics can be calculated. On a drag (touch) gesture, highlight the closest touched data point.
+	/// TODO: explain rotation
     public var body: some View {
         GeometryReader { geometry in
             ZStack {
-                if self.showFull && self.showBackground {
-                    self.getBackgroundPathView()
+                if self.didCellAppear && self.showBackground {
+                    LineBackgroundShapeView(chartData: chartData,
+                                            geometry: geometry,
+                                            style: style)
                 }
-                self.getLinePathView()
+                LineShapeView(chartData: chartData,
+                              geometry: geometry,
+                              style: style,
+                              trimTo: didCellAppear ? 1.0 : 0.0)
+                    .animation(.easeIn)
                 if self.showIndicator {
                     IndicatorPoint()
-                        .position(self.getClosestPointOnPath(touchLocation: self.touchLocation))
+                        .position(self.getClosestPointOnPath(geometry: geometry,
+                                                             touchLocation: self.touchLocation))
                         .rotationEffect(.degrees(180), anchor: .center)
                         .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
                 }
             }
             .onAppear {
-                self.frame = geometry.frame(in: .local)
+                didCellAppear = true
             }
+            .onDisappear() {
+                didCellAppear = false
+            }
+			
             .gesture(DragGesture()
                 .onChanged({ value in
                     self.touchLocation = value.location
                     self.showIndicator = true
+                    self.getClosestDataPoint(geometry: geometry, touchLocation: value.location)
+                    self.chartValue.interactionInProgress = true
                 })
                 .onEnded({ value in
                     self.touchLocation = .zero
                     self.showIndicator = false
+                    self.chartValue.interactionInProgress = false
                 })
             )
         }
@@ -73,48 +70,42 @@ public struct Line: View {
 // MARK: - Private functions
 
 extension Line {
-    private func getClosestPointOnPath(touchLocation: CGPoint) -> CGPoint {
-        let closest = self.path.point(to: touchLocation.x)
-        return closest
+	/// Calculate point closest to where the user touched
+	/// - Parameter touchLocation: location in view where touched
+	/// - Returns: `CGPoint` of data point on chart
+    private func getClosestPointOnPath(geometry: GeometryProxy, touchLocation: CGPoint) -> CGPoint {
+        let geometryWidth = geometry.frame(in: .local).width
+        let normalisedTouchLocationX = (touchLocation.x / geometryWidth) * CGFloat(chartData.normalisedPoints.count - 1)
+        let closest = self.path.point(to: normalisedTouchLocationX)
+        var denormClosest = closest.denormalize(with: geometry)
+        denormClosest.x = denormClosest.x / CGFloat(chartData.normalisedPoints.count - 1)
+        denormClosest.y = denormClosest.y / CGFloat(chartData.normalisedRange)
+        return denormClosest
     }
 
-    private func getBackgroundPathView() -> some View {
-        self.closedPath
-            .fill(style.backgroundColor.linearGradient(from: .bottom, to: .top))
-            .rotationEffect(.degrees(180), anchor: .center)
-            .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
-            .transition(.opacity)
-            .animation(.easeIn(duration: 1.6))
-    }
-
-    private func getLinePathView() -> some View {
-        self.path
-            .trim(from: 0, to: self.showFull ? 1:0)
-            .stroke(LinearGradient(gradient: style.foregroundColor.first?.gradient ?? ColorGradient.orangeBright.gradient,
-                                   startPoint: .leading,
-                                   endPoint: .trailing),
-                    style: StrokeStyle(lineWidth: 3, lineJoin: .round))
-            .rotationEffect(.degrees(180), anchor: .center)
-            .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
-            .animation(Animation.easeOut(duration: 1.2))
-            .onAppear {
-                self.showFull = true
-            }
-            .onDisappear {
-                self.showFull = false
-            }
-            .drawingGroup()
+//	/// Figure out where closest touch point was
+//	/// - Parameter point: location of data point on graph, near touch location
+    private func getClosestDataPoint(geometry: GeometryProxy, touchLocation: CGPoint) {
+        let geometryWidth = geometry.frame(in: .local).width
+        let index = Int(round((touchLocation.x / geometryWidth) * CGFloat(chartData.points.count - 1)))
+        if (index >= 0 && index < self.chartData.data.count){
+            self.chartValue.currentValue = self.chartData.points[index]
+        }
     }
 }
 
 struct Line_Previews: PreviewProvider {
+    /// Predefined style, black over white, for preview
+    static let blackLineStyle = ChartStyle(backgroundColor: ColorGradient(.white), foregroundColor: ColorGradient(.black))
+
+    /// Predefined style red over white, for preview
+    static let redLineStyle = ChartStyle(backgroundColor: .whiteBlack, foregroundColor: ColorGradient(.red))
+
     static var previews: some View {
         Group {
-            Line(chartData:  ChartData([8, 23, 32, 7, 23, 43]), style: blackLineStyle)
+            Line(chartData:  ChartData([8, 23, 32, 7, 23, -4]), style: blackLineStyle)
             Line(chartData:  ChartData([8, 23, 32, 7, 23, 43]), style: redLineStyle)
         }
     }
 }
 
-private let blackLineStyle = ChartStyle(backgroundColor: ColorGradient(.white), foregroundColor: ColorGradient(.black))
-private let redLineStyle = ChartStyle(backgroundColor: .whiteBlack, foregroundColor: ColorGradient(.red))

Sources/SwiftUICharts/Charts/LineChart/LineBackgroundShape.swift

@@ -0,0 +1,31 @@
+import SwiftUI
+
+struct LineBackgroundShape: Shape {
+    var data: [Double]
+    func path(in rect: CGRect) -> Path {
+        let path = Path.quadClosedCurvedPathWithPoints(points: data, step: CGPoint(x: 1.0, y: 1.0))
+        return path
+    }
+}
+
+struct LineBackgroundShape_Previews: PreviewProvider {
+    static var previews: some View {
+        Group {
+            GeometryReader { geometry in
+                LineBackgroundShape(data: [0, 0.5, 0.8, 0.6, 1])
+                    .transform(CGAffineTransform(scaleX: geometry.size.width / 4.0, y: geometry.size.height))
+                    .fill(Color.red)
+                    .rotationEffect(.degrees(180), anchor: .center)
+                    .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
+            }
+            GeometryReader { geometry in
+                LineBackgroundShape(data: [0, -0.5, 0.8, -0.6, 1])
+                    .transform(CGAffineTransform(scaleX: geometry.size.width / 4.0, y: geometry.size.height / 1.6))
+                    .fill(Color.blue)
+                    .rotationEffect(.degrees(180), anchor: .center)
+                    .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
+            }
+        }
+    }
+}
+

Sources/SwiftUICharts/Charts/LineChart/LineBackgroundShapeView.swift

@@ -0,0 +1,19 @@
+import SwiftUI
+
+struct LineBackgroundShapeView: View {
+    var chartData: ChartData
+    var geometry: GeometryProxy
+    var style: ChartStyle
+
+    var body: some View {
+        LineBackgroundShape(data: chartData.normalisedPoints)
+            .transform(CGAffineTransform(scaleX: geometry.size.width / CGFloat(chartData.normalisedPoints.count - 1),
+                                         y: geometry.size.height / CGFloat(chartData.normalisedRange)))
+            .fill(LinearGradient(gradient: Gradient(colors: [style.foregroundColor.first?.startColor ?? .white,
+                                                             style.backgroundColor.startColor]),
+                                 startPoint: .bottom,
+                                 endPoint: .top))
+            .rotationEffect(.degrees(180), anchor: .center)
+            .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
+    }
+}

Sources/SwiftUICharts/Charts/LineChart/LineChart.swift

@@ -1,32 +1,18 @@
 import SwiftUI
 
-public struct LineChart: ChartType {
-    public func makeChart(data: Self.Data, style: Self.Style) -> some View {
+/// A type of chart that displays a line connecting the data points
+public struct LineChart: View, ChartBase {
+    public var chartData = ChartData()
+
+    @EnvironmentObject var data: ChartData
+    @EnvironmentObject var style: ChartStyle
+
+	/// The content and behavior of the `LineChart`.
+	///
+	///
+    public var body: some View {
         Line(chartData: data, style: style)
     }
-
+    
     public init() {}
 }
-
-struct LineChart_Previews: PreviewProvider {
-    static var previews: some View {
-        Group {
-            LineChart().makeChart(
-            data: .init([0]),
-            style: .init(backgroundColor: .white, foregroundColor: ColorGradient(.black)))
-            Group {
-                LineChart().makeChart(
-                    data: .init([1, 2, 3, 5, 1]),
-                    style: .init(backgroundColor: .white, foregroundColor: ColorGradient(.black)))
-            }.environment(\.colorScheme, .light)
-        
-            Group {
-                LineChart().makeChart(
-                data: .init([1, 2, 3]),
-                style: .init(backgroundColor: .white, foregroundColor: ColorGradient.redBlack))
-            }.environment(\.colorScheme, .dark)
-        
-        }
-        
-    }
-}

Sources/SwiftUICharts/Charts/LineChart/LineShape.swift

@@ -0,0 +1,30 @@
+import SwiftUI
+
+struct LineShape: Shape {
+    var data: [Double]
+    func path(in rect: CGRect) -> Path {
+        let path = Path.quadCurvedPathWithPoints(points: data, step: CGPoint(x: 1.0, y: 1.0))
+        return path
+    }
+}
+
+struct LineShape_Previews: PreviewProvider {
+    static var previews: some View {
+        Group {
+            GeometryReader { geometry in
+                LineShape(data: [0, 0.5, 0.8, 0.6, 1])
+                    .transform(CGAffineTransform(scaleX: geometry.size.width / 4.0, y: geometry.size.height))
+                    .stroke(Color.red)
+                    .rotationEffect(.degrees(180), anchor: .center)
+                    .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
+            }
+            GeometryReader { geometry in
+                LineShape(data: [0, -0.5, 0.8, -0.6, 1])
+                    .transform(CGAffineTransform(scaleX: geometry.size.width / 4.0, y: geometry.size.height / 1.6))
+                    .stroke(Color.blue)
+                    .rotationEffect(.degrees(180), anchor: .center)
+                    .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
+            }
+        }
+    }
+}

Sources/SwiftUICharts/Charts/LineChart/LineShapeView.swift

@@ -0,0 +1,26 @@
+import SwiftUI
+
+struct LineShapeView: View, Animatable {
+    var chartData: ChartData
+    var geometry: GeometryProxy
+    var style: ChartStyle
+    var trimTo: Double = 0
+
+    var animatableData: CGFloat {
+        get { CGFloat(trimTo) }
+        set { trimTo = Double(newValue) }
+    }
+
+    var body: some View {
+        LineShape(data: chartData.normalisedPoints)
+            .trim(from: 0, to: CGFloat(trimTo))
+            .transform(CGAffineTransform(scaleX: geometry.size.width / CGFloat(chartData.normalisedPoints.count - 1),
+                                         y: geometry.size.height / CGFloat(chartData.normalisedRange)))
+            .stroke(LinearGradient(gradient: style.foregroundColor.first?.gradient ?? ColorGradient.orangeBright.gradient,
+                                   startPoint: .leading,
+                                   endPoint: .trailing),
+                    style: StrokeStyle(lineWidth: 3, lineJoin: .round))
+            .rotationEffect(.degrees(180), anchor: .center)
+            .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
+    }
+}

Sources/SwiftUICharts/Charts/PieChart/PieChart.swift

@@ -1,63 +1,18 @@
-//
-//  PieChart.swift
-//  SwiftUICharts
-//
-//  Created by Nicolas Savoini on 2020-05-24.
-//
-
 import SwiftUI
 
-public struct PieChart: ChartType {
-    public func makeChart(data: Self.Data, style: Self.Style) -> some View {
+/// A type of chart that displays a slice of "pie" for each data point
+public struct PieChart: View, ChartBase {
+    public var chartData = ChartData()
+
+    @EnvironmentObject var data: ChartData
+    @EnvironmentObject var style: ChartStyle
+
+	/// The content and behavior of the `PieChart`.
+	///
+	///
+    public var body: some View {
         PieChartRow(chartData: data, style: style)
     }
+
     public init() {}
 }
-
-struct PieChart_Previews: PreviewProvider {
-    static var previews: some View {
-        Group {
-            PieChart().makeChart(
-                data: .init([0]),
-            style: styleOneColor)
-            
-            Group {
-                PieChart().makeChart(
-                    data: .init([56, 78, 53, 65, 54]),
-                style: styleOneColor)
-                PieChart().makeChart(
-                    data: .init([56, 78, 53, 65, 54]),
-                style: styleTwoColor)
-                PieChart().makeChart(
-                    data: .init([1, 1, 1, 1, 1, 1]),
-                style: trivialPursuit)
-            }.environment(\.colorScheme, .light)
-            
-            Group {
-                PieChart().makeChart(
-                    data: .init([56, 78, 53, 65, 54]),
-                style: styleOneColor)
-                PieChart().makeChart(
-                    data: .init([56, 78, 53, 65, 54]),
-                style: styleTwoColor)
-                PieChart().makeChart(
-                    data: .init([1, 1, 1, 1, 1, 1]),
-                style: trivialPursuit)
-            }.environment(\.colorScheme, .dark)
-            
-        }.previewLayout(.fixed(width: 250, height: 400))
-    }
-}
-
-private let styleOneColor = ChartStyle(backgroundColor: .white, foregroundColor: ColorGradient.init(.pink))
-
-private let styleTwoColor = ChartStyle(backgroundColor: ColorGradient(.black), foregroundColor: [ColorGradient(.yellow), ColorGradient(.red)])
-
-private let trivialPursuit = ChartStyle(
-    backgroundColor: .yellow,
-    foregroundColor: [ColorGradient(.yellow),
-                      ColorGradient(.pink),
-                      ColorGradient(.green),
-                      ColorGradient(.primary),
-                      ColorGradient(.blue),
-                      ColorGradient(.orange)])

Sources/SwiftUICharts/Charts/PieChart/PieChartCell.swift

@@ -1,12 +1,6 @@
-//
-//  PieChartCell.swift
-//  SwiftUICharts
-//
-//  Created by Nicolas Savoini on 2020-05-24.
-//
-
 import SwiftUI
 
+/// One slice of a `PieChartRow`
 struct PieSlice: Identifiable {
     var id = UUID()
     var startDeg: Double
@@ -14,6 +8,7 @@ struct PieSlice: Identifiable {
     var value: Double
 }
 
+/// A single row of data, a view in a `PieChart`
 public struct PieChartCell: View {
     @State private var show: Bool = false
     var rect: CGRect
@@ -21,7 +16,9 @@ public struct PieChartCell: View {
         return min(rect.width, rect.height)/2
     }
     var startDeg: Double
-    var endDeg: Double
+	var endDeg: Double
+
+	/// Path representing this slice
     var path: Path {
         var path = Path()
         path.addArc(
@@ -42,6 +39,9 @@ public struct PieChartCell: View {
     // Section color
     var accentColor: ColorGradient
     
+	/// The content and behavior of the `PieChartCell`.
+	///
+	/// Fills and strokes with 2-pixel line (unless start/end degrees not yet set). Animates by scaling up to 100% when first appears.
     public var body: some View {
         Group {
             path

Sources/SwiftUICharts/Charts/PieChart/PieChartHelpers.swift

@@ -0,0 +1,34 @@
+import SwiftUI
+
+func isPointInCircle(point: CGPoint, circleRect: CGRect) -> Bool {
+    let r = min(circleRect.width, circleRect.height) / 2
+    let center = CGPoint(x: circleRect.midX, y: circleRect.midY)
+    let dx = point.x - center.x
+    let dy = point.y - center.y
+    let distance = sqrt(dx * dx + dy * dy)
+    return distance <= r
+}
+
+func degree(for point: CGPoint, inCircleRect circleRect: CGRect) -> Double {
+    let center = CGPoint(x: circleRect.midX, y: circleRect.midY)
+    let dx = point.x - center.x
+    let dy = point.y - center.y
+    let acuteDegree = Double(atan(dy / dx)) * (180 / .pi)
+    
+    let isInBottomRight = dx >= 0 && dy >= 0
+    let isInBottomLeft = dx <= 0 && dy >= 0
+    let isInTopLeft = dx <= 0 && dy <= 0
+    let isInTopRight = dx >= 0 && dy <= 0
+    
+    if isInBottomRight {
+        return acuteDegree
+    } else if isInBottomLeft {
+        return 180 - abs(acuteDegree)
+    } else if isInTopLeft {
+        return 180 + abs(acuteDegree)
+    } else if isInTopRight {
+        return 360 - abs(acuteDegree)
+    }
+    
+    return 0
+}

Sources/SwiftUICharts/Charts/PieChart/PieChartRow.swift

@@ -1,23 +1,18 @@
-//
-//  PieChartRow.swift
-//  SwiftUICharts
-//
-//  Created by Nicolas Savoini on 2020-05-24.
-//
-
 import SwiftUI
 
+/// A single "row" (slice) of data, a view in a `PieChart`
 public struct PieChartRow: View {
     @ObservedObject var chartData: ChartData
+    @EnvironmentObject var chartValue: ChartValue
 
     var style: ChartStyle
 
     var slices: [PieSlice] {
         var tempSlices: [PieSlice] = []
         var lastEndDeg: Double = 0
-        let maxValue: Double = chartData.data.reduce(0, +)
+        let maxValue: Double = chartData.points.reduce(0, +)
         
-        for slice in chartData.data {
+        for slice in chartData.points {
             let normalized: Double = Double(slice) / (maxValue == 0 ? 1 : maxValue)
             let startDeg = lastEndDeg
             let endDeg = lastEndDeg + (normalized * 360)
@@ -27,55 +22,48 @@ public struct PieChartRow: View {
         
         return tempSlices
     }
-    
+
+    @State private var currentTouchedIndex = -1 {
+        didSet {
+            if oldValue != currentTouchedIndex {
+                chartValue.interactionInProgress = currentTouchedIndex != -1
+                guard currentTouchedIndex != -1 else { return }
+                chartValue.currentValue = slices[currentTouchedIndex].value
+            }
+        }
+    }
+
     public var body: some View {
         GeometryReader { geometry in
             ZStack {
                 ForEach(0..<self.slices.count) { index in
                     PieChartCell(
-                            rect: geometry.frame(in: .local),
-                            startDeg: self.slices[index].startDeg,
-                            endDeg: self.slices[index].endDeg,
-                            index: index,
-                            backgroundColor: self.style.backgroundColor.startColor,
-                            accentColor: self.style.foregroundColor.rotate(for: index)
-                        )
+                        rect: geometry.frame(in: .local),
+                        startDeg: self.slices[index].startDeg,
+                        endDeg: self.slices[index].endDeg,
+                        index: index,
+                        backgroundColor: self.style.backgroundColor.startColor,
+                        accentColor: self.style.foregroundColor.rotate(for: index)
+                    )
+                    .scaleEffect(currentTouchedIndex == index ? 1.1 : 1)
+                    .animation(Animation.spring())
                 }
-                
             }
+            .gesture(DragGesture()
+                        .onChanged({ value in
+                            let rect = geometry.frame(in: .local)
+                            let isTouchInPie = isPointInCircle(point: value.location, circleRect: rect)
+                            if isTouchInPie {
+                                let touchDegree = degree(for: value.location, inCircleRect: rect)
+                                currentTouchedIndex = slices.firstIndex(where: { $0.startDeg < touchDegree && $0.endDeg > touchDegree }) ?? -1
+                            } else {
+                                currentTouchedIndex = -1
+                            }
+                        })
+                        .onEnded({ value in
+                            currentTouchedIndex = -1
+                        })
+            )
         }
     }
-
 }
-
-struct PieChartRow_Previews: PreviewProvider {
-    static var previews: some View {
-        Group {
-            //Empty Array - Default Colors.OrangeStart
-            PieChartRow(
-                chartData: ChartData([8, 23, 32, 7, 23, 43]),
-                style: defaultMultiColorChartStyle)
-            .frame(width: 100, height: 100)
-            
-            PieChartRow(
-                chartData:  ChartData([8, 23, 32, 7, 23, 43]),
-                style: multiColorChartStyle)
-            .frame(width: 100, height: 100)
-            
-            PieChartRow(
-                chartData:  ChartData([8, 23, 32, 7, 23, 43]),
-                style: multiColorChartStyle)
-            .frame(width: 100, height: 100)
-            
-        }.previewLayout(.fixed(width: 125, height: 125))
-        
-    }
-}
-
-private let defaultMultiColorChartStyle = ChartStyle(
-    backgroundColor: Color.white,
-    foregroundColor: [ColorGradient]())
-
-private let multiColorChartStyle = ChartStyle(
-backgroundColor: Color.purple,
-foregroundColor: [ColorGradient.greenRed, ColorGradient.whiteBlack])

Sources/SwiftUICharts/Charts/RingsChart/Ring.swift

@@ -0,0 +1,187 @@
+//
+//  Ring.swift
+//  ChartViewV2Demo
+//
+//  Created by Dan Wood on 8/20/20.
+//	Based on article and playground code by Frank Jia
+//	https://medium.com/@frankjia/creating-activity-rings-in-swiftui-11ef7d336676
+
+import SwiftUI
+
+
+extension Double {
+	func toRadians() -> Double {
+		return self * Double.pi / 180
+	}
+	func toCGFloat() -> CGFloat {
+		return CGFloat(self)
+	}
+}
+
+struct RingShape: Shape {
+	/// Helper function to convert percent values to angles in degrees
+	/// - Parameters:
+	///   - percent: percent, greater than 100 is OK
+	///   - startAngle: angle to add after converting
+	/// - Returns: angle in degrees
+	static func percentToAngle(percent: Double, startAngle: Double) -> Double {
+		(percent / 100 * 360) + startAngle
+	}
+	private var percent: Double
+	private var startAngle: Double
+	private let drawnClockwise: Bool
+
+	// This allows animations to run smoothly for percent values
+	var animatableData: Double {
+		get {
+			return percent
+		}
+		set {
+			percent = newValue
+		}
+	}
+
+	init(percent: Double = 100, startAngle: Double = -90, drawnClockwise: Bool = false) {
+		self.percent = percent
+		self.startAngle = startAngle
+		self.drawnClockwise = drawnClockwise
+	}
+
+	/// This draws a simple arc from the start angle to the end angle
+	///
+	/// - Parameter rect: The frame of reference for describing this shape.
+	/// - Returns: A path that describes this shape.
+	func path(in rect: CGRect) -> Path {
+		let width = rect.width
+		let height = rect.height
+		let radius = min(width, height) / 2
+		let center = CGPoint(x: width / 2, y: height / 2)
+		let endAngle = Angle(degrees: RingShape.percentToAngle(percent: self.percent, startAngle: self.startAngle))
+		return Path { path in
+			path.addArc(center: center, radius: radius, startAngle: Angle(degrees: startAngle), endAngle: endAngle, clockwise: drawnClockwise)
+		}
+	}
+}
+
+struct Ring: View {
+
+	private static let ShadowColor: Color = Color.black.opacity(0.2)
+	private static let ShadowRadius: CGFloat = 5
+	private static let ShadowOffsetMultiplier: CGFloat = ShadowRadius + 2
+
+	private let ringWidth: CGFloat
+	private let percent: Double
+	private let foregroundColor: ColorGradient
+	private let startAngle: Double = -90
+
+	private let touchLocation: CGFloat
+
+
+
+	private var gradientStartAngle: Double {
+		self.percent >= 100 ? relativePercentageAngle - 360 : startAngle
+	}
+	private var absolutePercentageAngle: Double {
+		RingShape.percentToAngle(percent: self.percent, startAngle: 0)
+	}
+	private var relativePercentageAngle: Double {
+		// Take into account the startAngle
+		absolutePercentageAngle + startAngle
+	}
+	private var lastGradientColor: Color {
+		self.foregroundColor.endColor
+	}
+
+	private var ringGradient: AngularGradient {
+		AngularGradient(
+			gradient: self.foregroundColor.gradient,
+			center: .center,
+			startAngle: Angle(degrees: self.gradientStartAngle),
+			endAngle: Angle(degrees: relativePercentageAngle)
+		)
+	}
+
+	init(ringWidth: CGFloat, percent: Double, foregroundColor: ColorGradient, touchLocation:CGFloat) {
+		self.ringWidth = ringWidth
+		self.percent = percent
+		self.foregroundColor = foregroundColor
+		self.touchLocation = touchLocation
+	}
+
+	var body: some View {
+		GeometryReader { geometry in
+			ZStack {
+				// Background for the ring. Use the final color with reduced opacity
+				RingShape()
+					.stroke(style: StrokeStyle(lineWidth: self.ringWidth))
+					.fill(lastGradientColor.opacity(0.142857))
+				// Foreground
+				RingShape(percent: self.percent, startAngle: self.startAngle)
+					.stroke(style: StrokeStyle(lineWidth: self.ringWidth, lineCap: .round))
+					.fill(self.ringGradient)
+				// End of ring with drop shadow
+				if self.getShowShadow(frame: geometry.size) {
+					Circle()
+						.fill(self.lastGradientColor)
+						.frame(width: self.ringWidth, height: self.ringWidth, alignment: .center)
+						.offset(x: self.getEndCircleLocation(frame: geometry.size).0,
+								y: self.getEndCircleLocation(frame: geometry.size).1)
+						.shadow(color: Ring.ShadowColor,
+								radius: Ring.ShadowRadius,
+								x: self.getEndCircleShadowOffset().0,
+								y: self.getEndCircleShadowOffset().1)
+				}
+			}
+		}
+		// Padding to ensure that the entire ring fits within the view size allocated
+		.padding(self.ringWidth / 2)
+	}
+
+	private func getEndCircleLocation(frame: CGSize) -> (CGFloat, CGFloat) {
+		// Get angle of the end circle with respect to the start angle
+		let angleOfEndInRadians: Double = relativePercentageAngle.toRadians()
+		let offsetRadius = min(frame.width, frame.height) / 2
+		return (offsetRadius * cos(angleOfEndInRadians).toCGFloat(), offsetRadius * sin(angleOfEndInRadians).toCGFloat())
+	}
+
+	private func getEndCircleShadowOffset() -> (CGFloat, CGFloat) {
+		let angleForOffset = absolutePercentageAngle + (self.startAngle + 90)
+		let angleForOffsetInRadians = angleForOffset.toRadians()
+		let relativeXOffset = cos(angleForOffsetInRadians)
+		let relativeYOffset = sin(angleForOffsetInRadians)
+		let xOffset = relativeXOffset.toCGFloat() * Ring.ShadowOffsetMultiplier
+		let yOffset = relativeYOffset.toCGFloat() * Ring.ShadowOffsetMultiplier
+		return (xOffset, yOffset)
+	}
+
+	private func getShowShadow(frame: CGSize) -> Bool {
+		if self.percent >= 100 {
+			return true
+		}
+		let circleRadius = min(frame.width, frame.height) / 2
+		let remainingAngleInRadians = (360 - absolutePercentageAngle).toRadians().toCGFloat()
+
+		return circleRadius * remainingAngleInRadians <= self.ringWidth
+	}
+}
+
+struct Ring_Previews: PreviewProvider {
+	static var previews: some View {
+		VStack {
+			Ring(
+				ringWidth: 50, percent: 5 ,
+				foregroundColor: ColorGradient(.green, .blue), touchLocation: -1.0
+			)
+			.frame(width: 200, height: 200)
+
+			Ring(
+				ringWidth: 20, percent: 110 ,
+				foregroundColor: ColorGradient(.red, .blue), touchLocation: -1.0
+			)
+			.frame(width: 200, height: 200)
+
+
+
+		}
+	}
+}

Sources/SwiftUICharts/Charts/RingsChart/RingsChart.swift

@@ -0,0 +1,23 @@
+//
+//  RingsChart.swift
+//  ChartViewV2Demo
+//
+//  Created by Dan Wood on 8/20/20.
+//
+
+import SwiftUI
+
+public struct RingsChart: View, ChartBase {
+	public var chartData = ChartData()
+
+	@EnvironmentObject var data: ChartData
+	@EnvironmentObject var style: ChartStyle
+
+	// TODO - should put background opacity, ring width & spacing as chart style values
+	
+	public var body: some View {
+		RingsChartRow(width:10.0, spacing:5.0, chartData: data, style: style)
+	}
+
+    public init() {}
+}

Sources/SwiftUICharts/Charts/RingsChart/RingsChartRow.swift

@@ -0,0 +1,133 @@
+//
+//  RingsChartRow.swift
+//  ChartViewV2Demo
+//
+//  Created by Dan Wood on 8/20/20.
+//
+
+import SwiftUI
+
+public struct RingsChartRow: View {
+
+	var width : CGFloat
+	var spacing : CGFloat
+
+	@EnvironmentObject var chartValue: ChartValue
+	@ObservedObject var chartData: ChartData
+	@State var touchRadius: CGFloat = -1.0
+
+	var style: ChartStyle
+
+	public var body: some View {
+		GeometryReader { geometry in
+
+			ZStack {
+
+				// FIXME: Why is background circle offset strangely when frame isn't specified? See Preview below. Related to the .animation somehow ????
+				Circle()
+					.fill(RadialGradient(gradient: self.style.backgroundColor.gradient, center: .center, startRadius: min(geometry.size.width, geometry.size.height)/2.0, endRadius: 1.0))
+
+				ForEach(0..<self.chartData.data.count, id: \.self) { index in
+
+					let scaleUp = isRingScaled(size:geometry.size, touchRadius: self.touchRadius, index: index)
+					let scaledWidth = scaleUp ? self.width * 2.0 : self.width
+
+					let normalPadding = (width + spacing) * CGFloat(index)
+					let scaledDiff = (scaledWidth - width) / 2.0
+					let padding = min(normalPadding - scaledDiff,
+									  min(geometry.size.width, geometry.size.height)/2.0 - width
+									  // make sure it doesn't get to crazy value
+					)
+
+					Ring(ringWidth:scaledWidth, percent: self.chartData.points[index], foregroundColor:self.style.foregroundColor.rotate(for: index),
+						 touchLocation: self.touchRadius)
+
+
+						.zIndex(scaleUp ? 1 : 0)	// make sure zoomed one is on top
+						.padding(padding)
+
+						.animation(Animation.easeIn(duration: 0.5))
+				}
+				//                   .drawingGroup()
+			}
+
+			.gesture(DragGesture()
+						.onChanged({ value in
+							let frame = geometry.frame(in: .local)
+							let radius = min(frame.width, frame.height) / 2.0
+							let deltaX = value.location.x - frame.midX
+							let deltaY = value.location.y - frame.midY
+							self.touchRadius = sqrt(deltaX*deltaX + deltaY*deltaY) // Pythagorean equation
+
+							if let currentValue = self.getCurrentValue(maxRadius: radius) {
+								self.chartValue.currentValue = currentValue
+								self.chartValue.interactionInProgress = true
+							}
+						})
+						.onEnded({ value in
+							self.chartValue.interactionInProgress = false
+							self.touchRadius = -1
+						})
+			)
+
+		}
+	}
+
+	/// should we scale up the touched ring?
+	/// - Parameters:
+	///   - size: size of the view
+	///   - touchRadius: distance from center where touched
+	///   - index: which ring is being drawn
+	/// - Returns: size to scale up or just scale of 1 if not scaled up
+	func isRingScaled(size: CGSize, touchRadius: CGFloat, index: Int) -> Bool {
+		let radius = min(size.width, size.height) / 2.0
+		return index == self.touchedCircleIndex(maxRadius: radius)
+	}
+
+	/// Find which circle has been touched
+	/// - Parameter maxRadius: radius of overall view circle
+	/// - Returns: which circle index was touched, if found. 0 = outer, 1 = next one in, etc.
+	func touchedCircleIndex(maxRadius: CGFloat) -> Int? {
+		guard self.chartData.data.count > 0 else { return nil }	// no data
+
+		// Pretend actual circle goes ½ the inter-ring spacing out, so that a touch
+		// is registered on either side of each ring
+		let radialDistanceFromEdge = (maxRadius + spacing/2) - self.touchRadius;
+		guard radialDistanceFromEdge >= 0 else { return nil }	// touched outside of ring
+
+		let touchIndex = Int(floor(radialDistanceFromEdge / (width + spacing)))
+
+		if touchIndex >= self.chartData.data.count { return nil }	// too far from outside, no ring
+
+		return touchIndex
+	}
+
+	/// Description
+	/// - Parameter maxRadius: radius of overall view circle
+	/// - Returns: percentage value of the touched circle, based on `touchRadius` if found
+	func getCurrentValue(maxRadius: CGFloat) -> Double? {
+
+		guard let index = self.touchedCircleIndex(maxRadius: maxRadius) else { return nil }
+		return self.chartData.points[index]
+	}
+}
+
+
+struct RingsChartRow_Previews: PreviewProvider {
+	static var previews: some View {
+
+		let multiStyle = ChartStyle(backgroundColor: ColorGradient(Color.black.opacity(0.05), Color.white),
+									foregroundColor:
+										[ColorGradient(.purple, .blue),
+										 ColorGradient(.orange, .red),
+										 ColorGradient(.green, .yellow),
+										])
+
+		return RingsChartRow(width:20.0, spacing:10.0, chartData: ChartData([25,50,75,100,125]), style: multiStyle)
+
+			// and why does this not get centered when frame isn't specified?
+			.frame(width:300, height:400)
+	}
+}
+
+

Sources/SwiftUICharts/Environment/Environment.swift

@@ -1,21 +0,0 @@
-import SwiftUI
-
-extension EnvironmentValues {
-    var chartType: AnyChartType {
-        get {
-            return self[ChartTypeKey.self]
-        }
-        set {
-            self[ChartTypeKey.self] = newValue
-        }
-    }
-
-    var chartStyle: ChartStyle {
-        get {
-            return self[ChartStyleKey.self]
-        }
-        set {
-            self[ChartStyleKey.self] = newValue
-        }
-    }
-}

Sources/SwiftUICharts/Environment/EnvironmentKeys.swift

@@ -1,11 +0,0 @@
-import SwiftUI
-
-struct ChartTypeKey: EnvironmentKey {
-    static let defaultValue: AnyChartType = AnyChartType(BarChart())
-}
-
-struct ChartStyleKey: EnvironmentKey {
-    static let defaultValue: ChartStyle = ChartStyle(backgroundColor: .white,
-                                                     foregroundColor: ColorGradient(ChartColors.orangeDark,
-                                                                                    ChartColors.orangeBright))
-}

Tests/SwiftUIChartsTests/ArrayExtensionTests.swift

@@ -1,10 +1,3 @@
-//
-//  File.swift
-//  
-//
-//  Created by Nicolas Savoini on 2020-05-25.
-//
-
 @testable import SwiftUICharts
 import XCTest