Fixed chart clipping, and value animation issue

Changed Int to Double in quadCurvedPathWithPoints and quadClosedCurvedPathWithPoints.

README.md

@@ -21,7 +21,22 @@ import the package in the file you would like to use it: `import SwiftUICharts`
 
 You can display a Chart by adding a chart view to your parent view: 
 
+### Demo
+
+Added an example project, with **iOS, watchOS** target: https://github.com/AppPear/ChartViewDemo
+
 ## Line charts
+
+**New full screen view called LineView!!!**
+
+![Line Charts](./fullscreen2.gif "Line Charts")
+
+```swift
+ LineView(data: [8,23,54,32,12,37,7,23,43], title: "Line chart", legend: "Full screen") // legend is optional, use optional .padding()
+```
+
+Adopts to dark mode automatically 
+
 ![Line Charts](./showcase3.gif "Line Charts")
 
 **Line chart is interactive, so you can drag across to reveal the data points**
@@ -32,6 +47,8 @@ You can add a line chart with the following code:
  LineChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", legend: "Legendary") // legend is optional
 ```
 
+**Turn drop shadow off by adding to the Initialiser: `dropShadow: false`**
+
 
 ## Bar charts
 ![Bar Charts](./showcase2.gif "Bar Charts")
@@ -45,14 +62,15 @@ You can add a bar chart with the following code:
 ```
 
 You can add different formats: 
-* Small `Form.small`
-* Medium  `Form.medium`
-* Large `Form.large` 
+* Small `ChartForm.small`
+* Medium  `ChartForm.medium`
+* Large `ChartForm.large` 
 
  ```swift
- BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", style: ChartStyle(formSize: Form.small))
+ BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", form: ChartForm.small)
  ```
- 
+ **Turn drop shadow off by adding to the Initialiser: `dropShadow: false`**
+
  ### You can customize styling of the chart with a ChartStyle object: 
 
 Customizable: 
@@ -63,7 +81,7 @@ Customizable:
 * legend text color
 
 ```swift
- let chartStyle = ChartStyle(backgroundColor: Color.black, accentColor: Colors.OrangeStart, secondGradientColor: Colors.OrangeEnd, chartFormSize: Form.medium, textColor: Color.white, legendTextColor: Color.white )
+ let chartStyle = ChartStyle(backgroundColor: Color.black, accentColor: Colors.OrangeStart, secondGradientColor: Colors.OrangeEnd, chartFormSize: ChartForm.medium, textColor: Color.white, legendTextColor: Color.white )
  ...
  BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", style: chartStyle)
 ```
@@ -85,16 +103,16 @@ You can access built-in styles:
 ![Custom Charts](./showcase5.png "Custom Charts")
 
 
-### You can customize the size of the chart with a Form object: 
+### You can customize the size of the chart with a ChartForm object: 
 
-**Form**
+**ChartForm**
 * `.small`
 * `.medium`
 * `.large`
 * `.detail`
 
 ```swift
-BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", form: Form.small)
+BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", form: ChartForm.small)
 ```
 
 ### WatchOS support for Bar charts: 
@@ -110,3 +128,5 @@ You can add a line chart with the following code:
  PieChartView(data: [8,23,54,32], title: "Title", legend: "Legendary") // legend is optional
 ```
 
+**Turn drop shadow off by adding to the Initialiser: `dropShadow: false`**
+

Sources/SwiftUICharts/BarChart/BarChartRow.swift

@@ -9,10 +9,10 @@
 import SwiftUI
 
 public struct BarChartRow : View {
-    var data: [Int]
+    var data: [Double]
     var accentColor: Color
     var secondGradientAccentColor: Color?
-    var maxValue: Int {
+    var maxValue: Double {
         data.max() ?? 0
     }
     @Binding var touchLocation: CGFloat
@@ -22,6 +22,7 @@ public struct BarChartRow : View {
                 ForEach(0..<self.data.count) { i in
                     BarChartCell(value: self.normalizedValue(index: i), index: i, width: Float(geometry.frame(in: .local).width - 22), numberOfDataPoints: self.data.count, accentColor: self.accentColor, secondGradientAccentColor: self.secondGradientAccentColor, touchLocation: self.$touchLocation)
                         .scaleEffect(self.touchLocation > CGFloat(i)/CGFloat(self.data.count) && self.touchLocation < CGFloat(i+1)/CGFloat(self.data.count) ? CGSize(width: 1.4, height: 1.1) : CGSize(width: 1, height: 1), anchor: .bottom)
+                        .animation(.spring())
                     
                 }
             }

Sources/SwiftUICharts/BarChart/BarChartView.swift

@@ -9,16 +9,18 @@
 import SwiftUI
 
 public struct BarChartView : View {
-    public var data: [Int]
+    public var data: [Double]
     public var title: String
     public var legend: String?
     public var style: ChartStyle
     public var formSize:CGSize
+    public var dropShadow: Bool
+
 //    let selectionFeedbackGenerator = UISelectionFeedbackGenerator()
     
     @State private var touchLocation: CGFloat = -1.0
     @State private var showValue: Bool = false
-    @State private var currentValue: Int = 0 {
+    @State private var currentValue: Double = 0 {
         didSet{
             if(oldValue != self.currentValue && self.showValue) {
 //                selectionFeedbackGenerator.selectionChanged()
@@ -27,14 +29,15 @@ public struct BarChartView : View {
         }
     }
     var isFullWidth:Bool {
-        return self.formSize == Form.large
+        return self.formSize == ChartForm.large
     }
-    public init(data: [Int], title: String, legend: String? = nil, style: ChartStyle = Styles.barChartStyleOrangeLight, form: CGSize? = Form.medium){
+    public init(data: [Double], title: String, legend: String? = nil, style: ChartStyle = Styles.barChartStyleOrangeLight, form: CGSize? = ChartForm.medium, dropShadow: Bool? = true){
         self.data = data
         self.title = title
         self.legend = legend
         self.style = style
         self.formSize = form!
+        self.dropShadow = dropShadow!
     }
     
     public var body: some View {
@@ -42,7 +45,7 @@ public struct BarChartView : View {
             Rectangle()
                 .fill(self.style.backgroundColor)
                 .cornerRadius(20)
-                .shadow(color: Color.gray, radius: 8 )
+                .shadow(color: Color.gray, radius: self.dropShadow ? 8 : 0)
             VStack(alignment: .leading){
                 HStack{
                     if(!showValue){
@@ -54,7 +57,7 @@ public struct BarChartView : View {
                             .font(.headline)
                             .foregroundColor(self.style.textColor)
                     }
-                    if(self.formSize == Form.large && self.legend != nil && !showValue) {
+                    if(self.formSize == ChartForm.large && self.legend != nil && !showValue) {
                         Text(self.legend!)
                             .font(.callout)
                             .foregroundColor(self.style.accentColor)
@@ -67,7 +70,7 @@ public struct BarChartView : View {
                         .foregroundColor(self.style.legendTextColor)
                 }.padding()
                 BarChartRow(data: data, accentColor: self.style.accentColor, secondGradientAccentColor: self.style.secondGradientColor, touchLocation: self.$touchLocation)
-                if self.legend != nil  && self.formSize == Form.medium {
+                if self.legend != nil  && self.formSize == ChartForm.medium {
                     Text(self.legend!)
                         .font(.headline)
                         .foregroundColor(self.style.legendTextColor)
@@ -91,9 +94,8 @@ public struct BarChartView : View {
         )
     }
     
-    func getCurrentValue()-> Int{
+    func getCurrentValue()-> Double {
         let index = max(0,min(self.data.count-1,Int(floor((self.touchLocation*self.formSize.width)/(self.formSize.width/CGFloat(self.data.count))))))
-        print(index)
         return self.data[index]
     }
 }

Sources/SwiftUICharts/Helpers.swift

@@ -19,6 +19,7 @@ public struct Colors {
     public static let OrangeEnd:Color = Color(hexString: "#EC2301")
     public static let LegendText:Color = Color(hexString: "#A7A6A8")
     public static let LegendColor:Color = Color(hexString: "#E8E7EA")
+    public static let LegendDarkColor:Color = Color(hexString: "#545454")
     public static let IndicatorKnob:Color = Color(hexString: "#FF57A6")
     public static let GradientUpperBlue:Color = Color(hexString: "#C2E8FF")
     public static let GradinetUpperBlue1:Color = Color(hexString: "#A8E1FF")
@@ -87,7 +88,7 @@ public struct Styles {
         legendTextColor: Color.gray)
 }
 
-public struct Form {
+public struct ChartForm {
     #if os(watchOS)
     public static let small = CGSize(width:120, height:90)
     public static let medium = CGSize(width:120, height:160)
@@ -128,10 +129,10 @@ public struct ChartStyle {
 }
 
 class ChartData: ObservableObject {
-    @Published var points: [Int] = [Int]()
-    @Published var currentPoint: Int? = nil
+    @Published var points: [Double] = [Double]()
+    @Published var currentPoint: Double? = nil
     
-    init(points:[Int]) {
+    init(points:[Double]) {
         self.points = points
     }
 }
@@ -143,9 +144,9 @@ class TestData{
 extension Color {
     init(hexString: String) {
         let hex = hexString.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
-        var int = UInt32()
-        Scanner(string: hex).scanHexInt32(&int)
-        let r, g, b: UInt32
+        var int = UInt64()
+        Scanner(string: hex).scanHexInt64(&int)
+        let r, g, b: UInt64
         switch hex.count {
         case 3: // RGB (12-bit)
             (r, g, b) = ((int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)

Sources/SwiftUICharts/LineChart/Legend.swift

@@ -12,23 +12,39 @@ struct Legend: View {
     @ObservedObject var data: ChartData
     @Binding var frame: CGRect
     @Binding var hideHorizontalLines: Bool
-    
+    @Environment(\.colorScheme) var colorScheme: ColorScheme
+    let padding:CGFloat = 3
+
     var stepWidth: CGFloat {
+        if data.points.count < 2 {
+            return 0
+        }
         return frame.size.width / CGFloat(data.points.count-1)
     }
     var stepHeight: CGFloat {
-        return frame.size.height / CGFloat(data.points.max()! + data.points.min()!)
+        if let min = data.points.min(), let max = data.points.max(), min != max {
+            if (min < 0){
+                return (frame.size.height-padding) / CGFloat(max - min)
+            }else{
+                return (frame.size.height-padding) / CGFloat(max + min)
+            }
+        }
+        return 0
+    }
+    
+    var min: CGFloat {
+        return CGFloat(data.points.min() ?? 0)
     }
     
     var body: some View {
         ZStack(alignment: .topLeading){
             ForEach((0...4), id: \.self) { height in
                 HStack(alignment: .center){
-                    Text("\(self.getYLegend()![height])").offset(x: 0, y: (self.frame.height-CGFloat(self.getYLegend()![height])*self.stepHeight)-(self.frame.height/2))
+                    Text("\(self.getYLegendSafe(height: height), specifier: "%.2f")").offset(x: 0, y: self.getYposition(height: height) )
                         .foregroundColor(Colors.LegendText)
                         .font(.caption)
-                     self.line(atHeight: CGFloat(self.getYLegend()![height]), width: self.frame.width)
-                        .stroke(Colors.LegendColor, style: StrokeStyle(lineWidth: 1.5, lineCap: .round, dash: [5,height == 0 ? 0 : 10]))
+                    self.line(atHeight: self.getYLegendSafe(height: height), width: self.frame.width)
+                        .stroke(self.colorScheme == .dark ? Colors.LegendDarkColor : Colors.LegendColor, style: StrokeStyle(lineWidth: 1.5, lineCap: .round, dash: [5,height == 0 ? 0 : 10]))
                         .opacity((self.hideHorizontalLines && height != 0) ? 0 : 1)
                         .rotationEffect(.degrees(180), anchor: .center)
                         .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
@@ -41,30 +57,40 @@ struct Legend: View {
         }
     }
     
+    func getYLegendSafe(height:Int)->CGFloat{
+        if let legend = getYLegend() {
+            return CGFloat(legend[height])
+        }
+        return 0
+    }
+    
+    func getYposition(height: Int)-> CGFloat {
+        if let legend = getYLegend() {
+            return (self.frame.height-((CGFloat(legend[height]) - min)*self.stepHeight))-(self.frame.height/2)
+        }
+        return 0
+       
+    }
+    
     func line(atHeight: CGFloat, width: CGFloat) -> Path {
         var hLine = Path()
-        hLine.move(to: CGPoint(x:5, y: atHeight*stepHeight))
-        hLine.addLine(to: CGPoint(x: width, y: atHeight*stepHeight))
+        hLine.move(to: CGPoint(x:5, y: (atHeight-min)*stepHeight))
+        hLine.addLine(to: CGPoint(x: width, y: (atHeight-min)*stepHeight))
         return hLine
     }
     
-    func getYLegend() -> [Int]? {
+    func getYLegend() -> [Double]? {
         guard let max = data.points.max() else { return nil }
         guard let min = data.points.min() else { return nil }
-        if(min > 0){
-            let upperBound = ((max/10)+1) * 10
-            let step = upperBound/4
-            return [step * 0,step * 1, step * 2, step * 3, step * 4]
-        }
-        
-        return nil
+        let step = Double(max - min)/4
+        return [min+step * 0, min+step * 1, min+step * 2, min+step * 3, min+step * 4]
     }
 }
 
 struct Legend_Previews: PreviewProvider {
     static var previews: some View {
         GeometryReader{ geometry in
-            Legend(data: TestData.data, frame: .constant(geometry.frame(in: .local)), hideHorizontalLines: .constant(false))
+            Legend(data: ChartData(points: [0.2,0.4,1.4,4.5]), frame: .constant(geometry.frame(in: .local)), hideHorizontalLines: .constant(false))
         }.frame(width: 320, height: 200)
     }
 }

Sources/SwiftUICharts/LineChart/Line.swift

@@ -15,12 +15,22 @@ struct Line: View {
     @Binding var showIndicator: Bool
     @State private var showFull: Bool = false
     @State var showBackground: Bool = true
-    
+    let padding:CGFloat = 30
     var stepWidth: CGFloat {
+        if data.points.count < 2 {
+            return 0
+        }
         return frame.size.width / CGFloat(data.points.count-1)
     }
     var stepHeight: CGFloat {
-        return frame.size.height / CGFloat(data.points.max()! + data.points.min()!)
+        if let min = data.points.min(), let max = data.points.max(), min != max {
+            if (min <= 0){
+                return (frame.size.height-padding) / CGFloat(data.points.max()! - data.points.min()!)
+            }else{
+                return (frame.size.height-padding) / CGFloat(data.points.max()! + data.points.min()!)
+            }
+        }
+        return 0
     }
     var path: Path {
         return Path.quadCurvedPathWithPoints(points: data.points, step: CGPoint(x: stepWidth, y: stepHeight))
@@ -67,24 +77,24 @@ struct Line: View {
 
 extension CGPoint {
     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
-      )
+        return CGPoint(
+            x: point1.x + (point2.x - point1.x) / 2,
+            y: point1.y + (point2.y - point1.y) / 2
+        )
     }
     
     func dist(to: CGPoint) -> CGFloat {
-      return sqrt((pow(self.x - to.x, 2) + pow(self.y - to.y, 2)))
+        return sqrt((pow(self.x - to.x, 2) + pow(self.y - to.y, 2)))
     }
     
     static func midPointForPoints(p1:CGPoint, p2:CGPoint) -> CGPoint {
         return CGPoint(x:(p1.x + p2.x) / 2,y: (p1.y + p2.y) / 2)
     }
-
+    
     static func controlPointForPoints(p1:CGPoint, p2:CGPoint) -> CGPoint {
         var controlPoint = CGPoint.midPointForPoints(p1:p1, p2:p2)
         let diffY = abs(p2.y - controlPoint.y)
-
+        
         if (p1.y < p2.y){
             controlPoint.y += diffY
         } else if (p1.y > p2.y) {
@@ -94,16 +104,17 @@ extension CGPoint {
     }
 }
 extension Path {
-    static func quadCurvedPathWithPoints(points:[Int], step:CGPoint) -> Path {
+    static func quadCurvedPathWithPoints(points:[Double], step:CGPoint) -> Path {
         var path = Path()
-        var p1 = CGPoint(x: 0, y: CGFloat(points[0])*step.y)
-        path.move(to: p1)
-        if(points.count < 2){
-            path.addLine(to: CGPoint(x: step.x, y: step.y*CGFloat(points[1])))
+        if (points.count < 2){
             return path
         }
+        guard var offset = points.min() else { return path }
+        offset -= 3
+        var p1 = CGPoint(x: 0, y: CGFloat(points[0]-offset)*step.y)
+        path.move(to: p1)
         for pointIndex in 1..<points.count {
-            let p2 = CGPoint(x: step.x * CGFloat(pointIndex), y: step.y*CGFloat(points[pointIndex]))
+            let p2 = CGPoint(x: step.x * CGFloat(pointIndex), y: step.y*CGFloat(points[pointIndex]-offset))
             let midPoint = CGPoint.midPointForPoints(p1: p1, p2: p2)
             path.addQuadCurve(to: midPoint, control: CGPoint.controlPointForPoints(p1: midPoint, p2: p1))
             path.addQuadCurve(to: p2, control: CGPoint.controlPointForPoints(p1: midPoint, p2: p2))
@@ -112,17 +123,18 @@ extension Path {
         return path
     }
     
-    static func quadClosedCurvedPathWithPoints(points:[Int], step:CGPoint) -> Path {
+    static func quadClosedCurvedPathWithPoints(points:[Double], step:CGPoint) -> Path {
         var path = Path()
-        path.move(to: .zero)
-        var p1 = CGPoint(x: 0, y: CGFloat(points[0])*step.y)
-        path.addLine(to: p1)
-        if(points.count < 2){
-            path.addLine(to: CGPoint(x: step.x, y: step.y*CGFloat(points[1])))
+        if (points.count < 2){
             return path
         }
+        guard var offset = points.min() else { return path }
+        offset -= 3
+        path.move(to: .zero)
+        var p1 = CGPoint(x: 0, y: CGFloat(points[0]-offset)*step.y)
+        path.addLine(to: p1)
         for pointIndex in 1..<points.count {
-            let p2 = CGPoint(x: step.x * CGFloat(pointIndex), y: step.y*CGFloat(points[pointIndex]))
+            let p2 = CGPoint(x: step.x * CGFloat(pointIndex), y: step.y*CGFloat(points[pointIndex]-offset))
             let midPoint = CGPoint.midPointForPoints(p1: p1, p2: p2)
             path.addQuadCurve(to: midPoint, control: CGPoint.controlPointForPoints(p1: midPoint, p2: p1))
             path.addQuadCurve(to: p2, control: CGPoint.controlPointForPoints(p1: midPoint, p2: p2))
@@ -153,7 +165,7 @@ extension Path {
 struct Line_Previews: PreviewProvider {
     static var previews: some View {
         GeometryReader{ geometry in
-            Line(data: TestData.data, frame: .constant(geometry.frame(in: .local)), touchLocation: .constant(CGPoint(x: 300, y: 12)), showIndicator: .constant(true))
+            Line(data: ChartData(points: [12,-230,10,54]), frame: .constant(geometry.frame(in: .local)), touchLocation: .constant(CGPoint(x: 100, y: 12)), showIndicator: .constant(true))
         }.frame(width: 320, height: 160)
     }
 }

Sources/SwiftUICharts/LineChart/LineChartView.swift

@@ -15,9 +15,11 @@ public struct LineChartView: View {
     public var legend: String?
     public var style: ChartStyle
     public var formSize:CGSize
+    public var dropShadow: Bool
+
     @State private var touchLocation:CGPoint = .zero
     @State private var showIndicatorDot: Bool = false
-    @State private var currentValue: Int = 2 {
+    @State private var currentValue: Double = 2 {
         didSet{
             if (oldValue != self.currentValue && showIndicatorDot) {
 //                selectionFeedbackGenerator.selectionChanged()
@@ -27,18 +29,21 @@ public struct LineChartView: View {
         }
     }
     let frame = CGSize(width: 180, height: 120)
+    private var rateValue: Int
     
-    public init(data: [Int], title: String, legend: String? = nil, style: ChartStyle = Styles.lineChartStyleOne, form: CGSize? = Form.medium){
+    public init(data: [Double], title: String, legend: String? = nil, style: ChartStyle = Styles.lineChartStyleOne, form: CGSize? = ChartForm.medium ,rateValue: Int? = 14, dropShadow: Bool? = true){
         self.data = ChartData(points: data)
         self.title = title
         self.legend = legend
         self.style = style
         self.formSize = form!
+        self.rateValue = rateValue!
+        self.dropShadow = dropShadow!
     }
     
     public var body: some View {
         ZStack(alignment: .center){
-            RoundedRectangle(cornerRadius: 20).fill(self.style.backgroundColor).frame(width: frame.width, height: 240, alignment: .center).shadow(radius: 8)
+            RoundedRectangle(cornerRadius: 20).fill(self.style.backgroundColor).frame(width: frame.width, height: 240, alignment: .center).shadow(radius: self.dropShadow ? 8 : 0)
             VStack(alignment: .leading){
                 if(!self.showIndicatorDot){
                     VStack(alignment: .leading, spacing: 8){
@@ -47,8 +52,12 @@ public struct LineChartView: View {
                             Text(self.legend!).font(.callout).foregroundColor(self.style.legendTextColor)
                         }
                         HStack {
-                            Image(systemName: "arrow.up")
-                            Text("14%")
+                            if (self.rateValue >= 0){
+                                Image(systemName: "arrow.up")
+                            }else{
+                                Image(systemName: "arrow.down")
+                            }
+                            Text("\(self.rateValue)%")
                         }
                     }
                     .transition(.opacity)
@@ -57,20 +66,20 @@ public struct LineChartView: View {
                 }else{
                     HStack{
                         Spacer()
-                        Text("\(self.currentValue)")
+                        Text("\(self.currentValue, specifier: "%.2f")")
                             .font(.system(size: 41, weight: .bold, design: .default))
                             .offset(x: 0, y: 30)
                         Spacer()
                     }
                     .transition(.scale)
-                    .animation(.spring())
+//                    .animation(.spring())
                     
                 }
                 Spacer()
                 GeometryReader{ geometry in
                     Line(data: self.data, frame: .constant(geometry.frame(in: .local)), touchLocation: self.$touchLocation, showIndicator: self.$showIndicatorDot)
                 }
-                .frame(width: frame.width, height: frame.height)
+                .frame(width: frame.width, height: frame.height + 30)
                 .clipShape(RoundedRectangle(cornerRadius: 20))
                 .offset(x: 0, y: 0)
             }.frame(width: self.formSize.width, height: self.formSize.height)
@@ -87,7 +96,7 @@ public struct LineChartView: View {
         )
     }
     
-    func getClosestDataPoint(toPoint: CGPoint, width:CGFloat, height: CGFloat) -> CGPoint {
+    @discardableResult func getClosestDataPoint(toPoint: CGPoint, width:CGFloat, height: CGFloat) -> CGPoint {
         let stepWidth: CGFloat = width / CGFloat(data.points.count-1)
         let stepHeight: CGFloat = height / CGFloat(data.points.max()! + data.points.min()!)
         

Sources/SwiftUICharts/LineChart/LineView.swift

@@ -0,0 +1,132 @@
+//
+//  LineView.swift
+//  LineChart
+//
+//  Created by András Samu on 2019. 09. 02..
+//  Copyright © 2019. András Samu. All rights reserved.
+//
+
+import SwiftUI
+
+public struct LineView: View {
+    @ObservedObject var data: ChartData
+    public var title: String?
+    public var legend: String?
+    public var style: ChartStyle
+    
+    @Environment(\.colorScheme) var colorScheme: ColorScheme
+    @State private var showLegend = false
+    @State private var dragLocation:CGPoint = .zero
+    @State private var indicatorLocation:CGPoint = .zero
+    @State private var closestPoint: CGPoint = .zero
+    @State private var opacity:Double = 0
+    @State private var currentDataNumber: Double = 0
+    @State private var hideHorizontalLines: Bool = false
+    
+    public init(data: [Double], title: String? = nil, legend: String? = nil, style: ChartStyle? = Styles.lineChartStyleOne){
+        self.data = ChartData(points: data)
+        self.title = title
+        self.legend = legend
+        self.style = style!
+    }
+    
+   public var body: some View {
+        GeometryReader{ geometry in
+            VStack(alignment: .leading, spacing: 8) {
+                Group{
+                    if (self.title != nil){
+                        Text(self.title!).font(.title).bold().foregroundColor(self.colorScheme == .dark ? Color.white : self.style.textColor)
+                    }
+                    if (self.legend != nil){
+                        Text(self.legend!).font(.callout).foregroundColor(self.colorScheme == .dark ? Color.white : self.style.legendTextColor)
+                    }
+                }.offset(x: 0, y: 20)
+                ZStack{
+                    GeometryReader{ reader in
+                        Rectangle().foregroundColor(self.colorScheme == .dark ? Color.black : self.style.backgroundColor)
+                        if(self.showLegend){
+                            Legend(data: self.data, frame: .constant(reader.frame(in: .local)), hideHorizontalLines: self.$hideHorizontalLines)
+                                .transition(.opacity)
+                                .animation(Animation.easeOut(duration: 1).delay(1))
+                        }
+                        Line(data: self.data, frame: .constant(CGRect(x: 0, y: 0, width: reader.frame(in: .local).width - 30, height: reader.frame(in: .local).height)), touchLocation: self.$indicatorLocation,showIndicator: self.$hideHorizontalLines ,showBackground: false).offset(x: 30, y: 0)
+                            .onAppear(){
+                                self.showLegend.toggle()
+                            }
+                    }.frame(width: geometry.frame(in: .local).size.width, height: 240).offset(x: 0, y: 40 )
+                    MagnifierRect(currentNumber: self.$currentDataNumber)
+                        .opacity(self.opacity)
+                        .offset(x: self.dragLocation.x - geometry.frame(in: .local).size.width/2, y: 36)
+                }
+                .frame(width: geometry.frame(in: .local).size.width, height: 240)
+                .gesture(DragGesture()
+                    .onChanged({ value in
+                        self.dragLocation = value.location
+                        self.indicatorLocation = CGPoint(x: max(value.location.x-30,0), y: 32)
+                        self.opacity = 1
+                        self.closestPoint = self.getClosestDataPoint(toPoint: value.location, width: geometry.frame(in: .local).size.width-30, height: 240)
+                        self.hideHorizontalLines = true
+                    })
+                    .onEnded({ value in
+                        self.opacity = 0
+                        self.hideHorizontalLines = false
+                    })
+                )
+            }
+        }
+    }
+    
+    func getClosestDataPoint(toPoint: CGPoint, width:CGFloat, height: CGFloat) -> CGPoint {
+        let stepWidth: CGFloat = width / CGFloat(data.points.count-1)
+        let stepHeight: CGFloat = height / CGFloat(data.points.max()! + data.points.min()!)
+
+        let index:Int = Int(floor((toPoint.x-15)/stepWidth))
+        if (index >= 0 && index < data.points.count){
+            self.currentDataNumber = self.data.points[index]
+            return CGPoint(x: CGFloat(index)*stepWidth, y: CGFloat(self.data.points[index])*stepHeight)
+        }
+        return .zero
+    }
+}
+
+struct LineView_Previews: PreviewProvider {
+    static var previews: some View {
+        LineView(data: [8,23,54,32,12,37,7,23,43], title: "Full chart", style: Styles.lineChartStyleOne)
+    }
+}
+
+struct IndicatorCircle: View {
+    var body: some View {
+       Circle()
+        .size(width: 12, height: 12)
+        .fill(Colors.BorderBlue)
+    }
+}
+
+struct MagnifierRect: View {
+    @Binding var currentNumber: Double
+    @Environment(\.colorScheme) var colorScheme: ColorScheme
+    var body: some View {
+        ZStack{
+            Text("\(self.currentNumber, specifier: "%.2f")")
+                .font(.system(size: 18, weight: .bold))
+                .offset(x: 0, y:-110)
+                .animation(.spring())
+                .foregroundColor(self.colorScheme == .dark ? Color.white : Color.black)
+            if (self.colorScheme == .dark ){
+                 RoundedRectangle(cornerRadius: 16)
+                    .stroke(Color.white, lineWidth: self.colorScheme == .dark ? 2 : 0)
+                    .frame(width: 60, height: 260)
+                    
+            }else{
+                 RoundedRectangle(cornerRadius: 16)
+                    .frame(width: 60, height: 280)
+                    .foregroundColor(Color.white)
+                    .shadow(color: Colors.LegendText, radius: 12, x: 0, y: 6 )
+                    .blendMode(.multiply)
+            }
+           
+
+        }.animation(.linear)
+    }
+}

Sources/SwiftUICharts/PieChart/PieChartCell.swift

@@ -12,7 +12,7 @@ struct PieSlice: Identifiable {
     var id = UUID()
     var startDeg: Double
     var endDeg: Double
-    var value: Int
+    var value: Double
     var normalizedValue: Double
 }
 

Sources/SwiftUICharts/PieChart/PieChartRow.swift

@@ -9,7 +9,7 @@
 import SwiftUI
 
 public struct PieChartRow : View {
-    var data: [Int]
+    var data: [Double]
     var backgroundColor: Color
     var accentColor: Color
     var slices: [PieSlice] {

Sources/SwiftUICharts/PieChart/PieChartView.swift

@@ -9,17 +9,20 @@
 import SwiftUI
 
 public struct PieChartView : View {
-    public var data: [Int]
+    public var data: [Double]
     public var title: String
     public var legend: String?
     public var style: ChartStyle
     public var formSize:CGSize
-    public init(data: [Int], title: String, legend: String? = nil, style: ChartStyle = Styles.pieChartStyleOne, form: CGSize? = Form.medium ){
+    public var dropShadow: Bool
+
+    public init(data: [Double], title: String, legend: String? = nil, style: ChartStyle = Styles.pieChartStyleOne, form: CGSize? = ChartForm.medium, dropShadow: Bool? = true ){
         self.data = data
         self.title = title
         self.legend = legend
         self.style = style
         self.formSize = form!
+        self.dropShadow = dropShadow!
     }
     
     public var body: some View {
@@ -27,7 +30,7 @@ public struct PieChartView : View {
             Rectangle()
                 .fill(self.style.backgroundColor)
                 .cornerRadius(20)
-                .shadow(color: Color.gray, radius: 12)
+                .shadow(color: Color.gray, radius: self.dropShadow ? 12 : 0)
             VStack(alignment: .leading){
                 HStack{
                     Text(self.title)