LineChartView

LineChartView is a Swift Package written in SwiftUI to add a line chart to your app. It has many available customizations and is interactive (user can move finger on line to get values details).

It is really easy to use and add to your app. It only takes an array of Double values as mandatory parameter. All other parameters are here to customize visual aspect and interactions.

Features

Displays Double values in a line chart
Add labels to each value (as String)
Change label (value) and secondary label colors
Change labels alignment (left, center, right)
Change indicator point color and size
Change line color (simple color or linear gradient with two colors)
Display dots for each point/value on line
Enable/disable drag gesture
Enable/disable haptic feedback when drag on exact value
Use SwiftUI modifiers to custom chart (like background or frame size)

Installation

Add LineChartView package to your project.

In Xcode 13.1: File -> Add Packages... then enter my project GitHub URL:
https://github.com/Jonathan-Gander/LineChartView

Usage

Quick first chart

In file you want to add a chart:

import LineChartView

Then first create a LineChartParameters and set parameters to customize your brand new chart. Only first data parameter is mandatory to provide your values (as an array of Double):

let chartParameters = LineChartParameters(data: [42.0, 25.8, 88.19, 15.0])

Then create a LineChartView by passing your LineChartParameter:

LineChartView(lineChartParameters: chartParameters)

Complete example

Here is an example of a View displaying a chart with values and labels, and set its height:

import SwiftUI
import LineChartView

struct ContentView: View {
    
    private let data: [Double] = [42.0, 25.8, 88.19, 15.0]
    private let labels: [String] = ["The answer", "Birthday", "2021-11-21", "My number"]
    
    var body: some View {
        
        let chartParameters = LineChartParameters(data: data)
        LineChartView(lineChartParameters: chartParameters)
            .frame(height: 300)
    }
}

Customize your chart

To customize your chart, you can set parameters of LineChartParameters. Here are explanations of each parameter:

data: Array of Double containing values to display
dataLabels: Array of String containing label for each value
labelColor: Color of values text
secondaryLabelColor: Color of labels text
labelsAlignment: .left, .center, .right to align both labels above chart
indicatorPointColor: Color of indicator point displayed when user drag finger on chart
indicatorPointSize: Size of indicator point
lineColor: First color of line
lineSecondColor: If set, will display a linear gradient from left to right from lineColor to lineSecondColor
lineWidth: Line width
dotsWidth: Display a dot for each value (set to -1 to hide dots)
dragGesture: Enable or disable drag gesture on chart
hapticFeedback: Enable or disable haptic feedback on each value point

Example of a complete LineChartParameters:

let chartParameters = LineChartParameters(
    data: data,
    dataLabels: labels,
    labelColor: .primary,
    secondaryLabelColor: .secondary,
    labelsAlignment: .left,
    indicatorPointColor: .blue,
    indicatorPointSize: 20,
    lineColor: .blue,
    lineSecondColor: .purple,
    lineWidth: 3,
    dotsWidth: 8,
    dragGesture: true,
    hapticFeedback: true
)

I'm working on...

🚧 Developer at work 🚧

Animation when line is drawn

Licence

Be free to use my LineChartView Package in your app. Licence is available here. Please only add a copyright and licence notice.

Note that I've based my solution on stock-charts. I've totally modified and changed it but you may found similar code parts.

Comments

Option to specify precision or use [Int]

Hi,

I love this library you built!

I thought it might be nice to be able to have an option to round numbers to for example 0 decimal points, as I kind of want to use this for [Int]. When I convert to Double, the chart will always display XXX.00.

Cheers!
enhancement

opened by jojost1 3
Support timestamps as x values
Support of time serie as x values.

Suggested here: link

[x] Points do not have equal space between them. Need to calculate space according to time spent between each.

[x] Can continue to have 'classical' x values (with equal space between them)

new feature
opened by Jonathan-Gander 2
Improve data arrays as parameters

Now in LineChartParameters there are three ways to set data: data, dataTimestamps and dataLabels.

I want to set an array of a custom struct containing all values / timestamps / labels for each value. It would be a lot easier to set the chart.

opened by Jonathan-Gander 1
Moved minimum version to iOS 14

The project didn't need a minimum deployment target of iOS 15, so I moved it down to 14 so I could use it in a project for work.

The only consequence is the removal of an unnecessary test, which was causing the package build to fail.

opened by JordanOsterberg 1
Option to fill the area below the line

For a look similar to https://github.com/pichukov/LightChart and https://github.com/AppPear/ChartView for example, I really like that look 😄

Optionally give an option to provide two colors to display a gradient, similar to lineSecondColor.
new feature

opened by jojost1 2