Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wouter125/chart
Fully customizable line chart in Swift
https://github.com/wouter125/chart
animation graph swift
Last synced: 20 days ago
JSON representation
Fully customizable line chart in Swift
- Host: GitHub
- URL: https://github.com/wouter125/chart
- Owner: Wouter125
- Created: 2020-05-17T18:52:31.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-29T12:41:08.000Z (over 4 years ago)
- Last Synced: 2024-12-04T18:44:31.183Z (3 months ago)
- Topics: animation, graph, swift
- Language: Swift
- Homepage:
- Size: 34.2 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Line Chart
Line Chart is a simple and light-weight line chart component for iOS. It's fully written in Swift, based upon UIView, and highly customizable. It currently supports the following features;
- [x] Bezier Curves
- [x] Linear Curves
- [x] Touch Tracking for linear and bezier curves
- [x] Fully customizable axes
- [x] Graph points
- [x] Animation control when switching between data sets
## How to install
Currently Line Chart is only available through the [Swift Package Manager](https://swift.org/package-manager/) or manual install.
1. Installation through Swift Package Manager can be done by going to `File > Swift Packages > Add Package Dependency`. Then enter the following line;
```https://github.com/Wouter125/Chart```
2. Manual installation can be done by cloning this repository and dragging all assets into your Xcode Project.
## How to use
To give you an idea of how to configure the line chart here are two examples. For more details see [parameters](#parameters).
**Linear line with graph points and axes**
```
private let graph: LineChart = {
let graph = LineChart()
graph.lineType = .linear
graph.isAnimated = false
graph.axesConfiguration.x.isHidden = false
graph.axesConfiguration.y.isHidden = false
graph.inset = UIEdgeInsets(top: 0, left: 48, bottom: 0, right: 24)
graph.showPoints = true
return graph
}()
```
**Bezier line with custom animation curves**
```
private let graph: LineChart = {
let graph = LineChart()
graph.lineType = .bezier
graph.isAnimated = true
graph.animationCurve = .easeInEaseOut
graph.animationDuration = 1.5
return graph
}()
```
## Parameters
### Graph
| Parameter | Type | Default | Description |
|------------------------|-------------|----------------------------------------------------|---------------------------------------------------------------------------------------------|
| data | [CGPoint] | nil | The data that you want to render on the graph canvas |
| inset | UIEdgeInset | UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) | Apply additional insets on your graph canvas |
| isTouchTrackingEnabled | Bool | true | Enable or disable the ability to pan on the graph to retrieve the data on the touched point |
### Axes
Axes uses a `struct` called `AxesConfiguration` which consists out of the following options;
| Parameter | Type | Default | Description |
|------------|---------|-----------------------------------|-------------------------------------------------------------------------------------------|
| x | xAxis | xAxis(isHidden: true, count: nil) | Defines whether the x axis should be shown, and if show how many of them there should be. |
| y | yAxis | yAxis(isHidden: true, count: nil) | Defines whether the x axis should be shown, and if show how many of them there should be. |
| color | CGColor | UIColor.systemGray5.cgColor | The color of the axes |
| width | CGFloat | 1.0 | The width of the axes |
| labelColor | CGColor | UIColor.systemGray.cgColor | The color of the labels of the axes |
### Line
| Parameter | Type | Default | Description |
|------------------|-----------|-------------------------------------|----------------------------------------------------------------------------|
| lineType | LineType | .linear | Whether you want your data to render as a `.linear` line or `.bezier` line |
| lineColor | CGColor | UIColor.systemGreen.cgColor | The color of the line |
| lineWidth | CGFloat | 2.0 | The width of the line |
| showBackground | Bool | true | Show a gradient or solid color below the line |
| backgroundColors | [CGColor] | [systemGreen(0.24), systemGreen(0)] | The colors for the gradient or solid color below the line |
### Points
| Parameter | Type | Default | Description |
|-------------------|---------|-----------------------------|-----------------------------------------------------------------|
| showPoints | Bool | false | Whether you want to show points at the data points you provided |
| pointsFillColor | CGColor | UIColor.white.cgColor | The fill color of the point |
| pointsBorderColor | CGColor | UIColor.systemGreen.cgColor | The border color of the point |
| pointsBorderWidth | CGFloat | 2.0 | The border width of the point |
### Animation
| Parameter | Type | Default | Description |
|-------------------|-----------------------|----------------|----------------------------------------------------------------------------|
| isAnimated | Bool | true | Whether you want to animate the layer when switching data sets |
| animationCurve | CAMediaTimingFunction | easeInOutCubic | The animation curve you want to apply. A full overview can be found here; |
| animationDuration | Double | 0.8 | The duration of the animation |