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 to add to your app. It only takes an array of LineChartData as mandatory parameter. All other parameters are here to customize visual aspect and interactions.

IMPORTANT: If you’re using versions under 1.3.0 please read documentation here.

Features

• Displays Double values in a line chart
• Support value serie (by default) or time serie as x axis
• Add labels to each value (as String)
• Add prefix and/or suffix to displayed data (as 42 kg for example)
• Change label (value) and secondary label colors
• Change labels alignment (left, center, right)
• Change number of digits after decimal point
• 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
• Change display mode: value + label, or only label (as main label)
• Enable/disable drag gesture
• Enable/disable haptic feedback when drag on exact value
• Use SwiftUI modifiers to customize chart (like background or frame size)

Value serie or time serie as x axis

By default, all values are displayed on x axis with equal distance between them (value serie). But you can also provide a timestamp (Date object) for each value. In this case, values are displayed on x axis depending on timestamp. For example, if you have 3 values with timestamps 03:00, 03:30 and 08:00, space between first and second one will be smaller than space between second and third one. It lets you display a line chart as time serie instead of just a value serie.

To set your chart as a time serie, simply set timestamp value for each of your LineChartData. Warning: All your LineChartData must have a timestamp to display chart as time serie. If one of them does not have it, it falls back to default value serie.

Examples

Default basic version (without any customization):

Examples with customizations:

Usage

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

Quick start

In file you want to add a chart:

import LineChartView

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

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

Then create a LineChartView by passing your LineChartParameter:

LineChartView(lineChartParameters: chartParameters)

Complete examples

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: [LineChartData] = [
        LineChartData(42, label: "The answer"),
        LineChartData(25.8, label: "Any text here"),
        LineChartData(88.19, label: "2021-11-21"),
        LineChartData(15.0, label: "My number"),
    ]
    
    var body: some View {
        let chartParameters = LineChartParameters(
            data: data
        )
        
        LineChartView(lineChartParameters: chartParameters)
            .frame(height: 300)
    }
}

Same example, but with timestamps so x axis is a time serie:

import SwiftUI
import LineChartView

struct ContentView: View {
    private let data: [LineChartData]
    
    init() {
        let formatter = DateFormatter()
        formatter.dateFormat = "yyyy/MM/dd HH:mm"
        
        let dates = [
            formatter.date(from: "2021/12/10 10:00")!,
            formatter.date(from: "2021/12/10 10:05")!,
            formatter.date(from: "2021/12/10 10:18")!,
            formatter.date(from: "2021/12/10 11:01")!
        ]
        
        data = [
            LineChartData(42.0, timestamp: dates[0], label: dates[0].formatted(date: .numeric, time: .standard)),
            LineChartData(25.8, timestamp: dates[1], label: dates[1].formatted(date: .numeric, time: .standard)),
            LineChartData(88.19, timestamp: dates[2], label: dates[2].formatted(date: .numeric, time: .standard)),
            LineChartData(15.0, timestamp: dates[3], label: dates[3].formatted(date: .numeric, time: .standard))
        ]
    }
    
    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: (mandatory) Array of LineChartData containing values to display, timestamp (option) and/or label (option)
• labelColor: Color of values text
• secondaryLabelColor: Color of labels text
• labelsAlignment: .left, .center, .right to align both labels above chart
• dataPrecisionLength: Number of digits after the decimal point (round value). Default to 2. Warning: Only available on iOS 15+.
• dataPrefix: Text displayed before data value (for example: “$” to display “$42”)
• dataSuffix: Text displayed after data value (for example: " kg" to display “42 kg”)
• indicatorPointColor: Color of indicator point displayed when user drags 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)
• displayMode: Choose how values and labels are displayed
• 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,
    labelColor: .primary,
    secondaryLabelColor: .secondary,
    labelsAlignment: .left,
    dataPrecisionLength: 0,
    dataPrefix: nil,
    dataSuffix: " kg",
    indicatorPointColor: .blue,
    indicatorPointSize: 20,
    lineColor: .blue,
    lineSecondColor: .purple,
    lineWidth: 3,
    dotsWidth: 8,
    displayMode: .default,
    dragGesture: true,
    hapticFeedback: true
)

They’re already using it

If you use my LineChartView in your app, please let me know and I will add your link here. You can contact me here.

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.