apppear/chartview

ChartView made in SwiftUI

SwiftUICharts

Swift package for displaying charts effortlessly.

V2 Beta is here 🎉🎉🎉

V2 focuses on providing a strong and easy to use base, on which you can build your beautiful custom charts. It provides basic building blocks, like a chart view (bar, pie, line and ring chart), grid view, card view, interactive label for displaying the curent chart value. So you decide, whether you build a fully fledged interactive view, or just display a bare bone chart

• How to install SwiftUI ChartView

• How to create your first chart

It supports interactions and animations

It is fully customizable, and works together with native SwiftUI elements well

Original (stable) version:

Usage

It supports:

• Line charts
• Bar charts
• Pie charts

Slack

Join our Slack channel for day to day conversation and more insights:

Slack invite link

Installation:

It requires iOS 13 and Xcode 11!

In Xcode go to File -> Swift Packages -> Add Package Dependency and paste in the repo's url: https://github.com/AppPear/ChartView

Usage:

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

LineChartView with multiple lines! First release of this feature, interaction is disabled for now, I'll figure it out how could be the best to interact with multiple lines with a single touch.

Usage:

MultiLineChartView(data: [([8,32,11,23,40,28], GradientColors.green), ([90,99,78,111,70,60,77], GradientColors.purple), ([34,56,72,38,43,100,50], GradientColors.orngPink)], title: "Title")

Gradient colors are now under the GradientColor struct you can create your own gradient by GradientColor(start: Color, end: Color)

Available preset gradients:

• orange
• blue
• green
• blu
• bluPurpl
• purple
• prplPink
• prplNeon
• orngPink

Full screen view called LineView!!!

 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

You can add your custom darkmode style by specifying:

let myCustomStyle = ChartStyle(...)
let myCutsomDarkModeStyle = ChartStyle(...)
myCustomStyle.darkModeStyle = myCutsomDarkModeStyle

Line chart is interactive, so you can drag across to reveal the data points

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

[New feature] you can display labels also along values and points for each bar to descirbe your data better! Bar chart is interactive, so you can drag across to reveal the data points

You can add a bar chart with the following code:

Labels and points:

 BarChartView(data: ChartData(values: [("2018 Q4",63150), ("2019 Q1",50900), ("2019 Q2",77550), ("2019 Q3",79600), ("2019 Q4",92550)]), title: "Sales", legend: "Quarterly") // legend is optional

Only points:

 BarChartView(data: ChartData(points: [8,23,54,32,12,37,7,23,43]), title: "Title", legend: "Legendary") // legend is optional

ChartData structure Stores values in data pairs (actually tuple): (String,Double)

• you can have duplicate values
• keeps the data order

You can initialise ChartData multiple ways:

• For integer values: ChartData(points: [8,23,54,32,12,37,7,23,43])
• For floating point values: ChartData(points: [2.34,3.14,4.56])
• For label,value pairs: ChartData(values: [("2018 Q4",63150), ("2019 Q1",50900)])

You can add different formats:

• Small ChartForm.small
• Medium ChartForm.medium
• Large ChartForm.large

BarChartView(data: ChartData(points: [8,23,54,32,12,37,7,23,43]), title: "Title", form: ChartForm.small)

For floating point numbers, you can set a custom specifier:

BarChartView(data: ChartData(points:[1.23,2.43,3.37]) ,title: "A", valueSpecifier: "%.2f")

For integers you can disable by passing: valueSpecifier: "%.0f"

You can set your custom image in the upper right corner by passing in the initialiser: cornerImage:Image(systemName: "waveform.path.ecg")

Turn drop shadow off by adding to the Initialiser: dropShadow: false

You can customize styling of the chart with a ChartStyle object:

Customizable:

• background color
• accent color
• second gradient color
• text color
• legend text color

 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)

You can access built-in styles:

 BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", style: Styles.barChartMidnightGreen)

All styles available as a preset:

• barChartStyleOrangeLight
• barChartStyleOrangeDark
• barChartStyleNeonBlueLight
• barChartStyleNeonBlueDark
• barChartMidnightGreenLight
• barChartMidnightGreenDark

You can customize the size of the chart with a ChartForm object:

ChartForm

• .small
• .medium
• .large
• .detail

BarChartView(data: [8,23,54,32,12,37,7,23,43], title: "Title", form: ChartForm.small)

You can choose whether bar is animated or not after completing your gesture.

If you want to animate back movement after completing your gesture, you set animatedToBack as true.

WatchOS support for Bar charts:

Pie charts

You can add a pie 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

chartview's Issues

LineView disappears when returning from detail of child of NavigationView

The chart disappears and the animation reverses when returning from a navigation view details page. Going to detail page again and returning will reanimate the chart and all is well again. This is a repeated pattern back and forth causes the same behavior over and over.

Multiple LineViews in Vstack/ScrollView

First of all - thanks for creating this library, it's awesome!💥

I'd like to out have a few LineViews inside a Vstack or ScrollView. Unfortunately, I'm not sure what is the best way to accomplish that without some layout issues. (please take note I'm fairly new to SwiftUI :))

When I put them in Vstack, they got squeezed like so:

 var body: some View {�

    VStack(alignment: .leading, spacing: 20) {

      LineView(data: [8,23,54,32,12,37,7,23,43], title: "Line chart", legend: "Full screen")
      LineView(data: [8,23,54,32,12,37,7,23,43], title: "Line chart", legend: "Full screen")
      LineView(data: [8,23,54,32,12,37,7,23,43], title: "Line chart", legend: "Full screen")

When I wrap the above in a ScrollView, I get the following layout and touch event is no longer being detected on the chart:

var body: some View {

 ScrollView(.vertical, showsIndicators: false) {

   VStack(alignment: .leading, spacing: 20) {
      LineView(data: [8,23,54,32,12,37,7,23,43], title: "Line chart", legend: "Full screen")
       LineView(data: [8,23,54,32,12,37,7,23,43], title: "Line chart", legend: "Full screen")

I haven't found any related issue here (maybe I overlooked something), so maybe that's not a bug but just me doing something wrong :)

Let me know if you have an idea what the best approach is ;)

Screenshot of ChartView

How can I get screenshot of Chart?

Thousands of Data Points

I have a data set consisting of 2,000-3,300 plots on the x axis, is there a way to make these more visible? I can't see any of my lines. The only problem is the y plots are only between 0-15

Multiple lines

Is it possible to make a linechart view with three lines in there? And without the 'fill' ?

So something like:
LineChartView(data1: [8,23,54,32,12,37,7,23,43], title: "Title1", legend: "Legendary"; data2: [9,22,52,30,10,30,9,27,47], title: "Title 2", legend: "Epic" )

only go to 99.9

hey nice work i'm having issues making the chart show numbers over 100
it only show data values to 99.9 how to make it go over 100.0..??
thanks

Add request to add Spider aka Radar Chart/Graph [PRs accepted for this]

Hello

I am just curious is there is any exceptions that the library will expand to other charts/graphs like the Spider (aka Radar) chart/graph?

Chris stuff doesn’t have wheels

Dark Mode Labels incorrect

The text color of the labels is not correct in Dark Mode. Looks like it is white text on a white background. I have attached a picture to show what I mean.

Image

How to integrate SwiftUICharts in to UIKit existing project.

Hi,
I want to integrate SwiftUICharts in to existing Swift project (This project developed using UIKit, UIViewController) based application.
Please let me know the possible solution.

BarChartView crashes when empty array is passed in

Crashes when empty array is passed as values of BarChartView

BarChart can not work with NavigationLink

Thanks a lot for your work!, I found that BarChart can't work with NavigationLink, My code are as follows:

NavigationView{
    ...
   VStack(alignment: .leading) {
                     NavigationLink(destination: ReviewToday()){
                        BarChartView(
                            data: ChartData(points: [110,23,54,32,12,37,7,23,43]),
                            title: "最近7日",
                            form: ChartForm.large
                        ).padding()
                    }

                }
}

when I click this chart, I can't get my destination view (ReviewToday())

AND, pieChart can show the correct View when I click.

the pieChart codes are as follows:

 NavigationLink(destination: ReviewToday()){
                    PieChartView(
                        data: [Double(todayCompletedTasks.count),Double(todayRemainTasks.count)],
                        title: "今日 \(todayRemainTasks.count)/\(todayCompletedTasks.count)",
                        form: ChartForm.medium
                    ).padding()
                }

UPDATE: I found by accident that when I long press BarChart, it works ! 23333, I guess that the NavigationLink tap gesture Conflict with BarChart's gesture.

is there any way to avoid this bug-seem thing happen?

Crash BarChartView(data: ChartData(points: [0,0,0,0])...

BarChartView(data: ChartData(points: [0,0,0,0]), title: "Start from Zero", legend: "Growing up")
Not Empty, but zero
Crash

Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer position contains NaN: [nan nan]. Layer: <SwiftUI.GradientLayer:0x600001445f10; position = CGPoint (0 0); bounds = CGRect (0 0; 0 0); delegate = <_TtC7SwiftUIP33_A34643117F00277B93DEBAB70EC0697122_UIShapeHitTestingView: 0x7fd8a9629e80; frame = (-8.98847e+307 -8.98847e+307; 1.79769e+308 1.79769e+308); transform = [nan, nan, nan, nan, 0, 0]; anchorPoint = (0, 0); autoresizesSubviews = NO; layer = <SwiftUI.GradientLayer: 0x600001445f10>>; allowsGroupOpacity = YES; transform = CATransform3D (nan nan 0 0; nan nan 0 0; 0 0 1 0; 0 0 0 1); cornerRadius = 4; anchorPoint = CGPoint (0 0)>'

Horizontal lines and labels hidden when navigate

An issue is happening with LineView when trying to perform a navigation link then going back for parent view, labels and horizontal lines are hidden..

MacOS frame improvement

Hey,
ChartView is working fine on MacOS, but when using ChartView() without the explicit form: CGSize() attribute, then the appearing view is not the actual frame, which results in major glitches when using VStack or HStack (overlapping with other views). Will look into it and might push a PR 📦

public modifier needed for body

Hi, I'm getting this error message "Property 'body' must be declared public because it matches a requirement in public protocol 'View' " seems like an easy enough change to make.

Line isn't graphed properly for specific values

Given the array, [0.6137386018237082, 0.2815539332538736, 0.17518342474101156, 0.24931948665991222, -1.1515280464216635, 1.1460104011887073, 0.2818422889043964, -1.3491616766467065, 1.5056442831215968, 0.6401420838971583, -56.699696969696966], of values, I get the following graph

Some content is clipped off. I looked at the source code and it has something to do with step height.

Unable to add labels in bar chart

How can I do this?

X-axis labels for LineChart

Hey :)

I just discovered this amazing library. It seems to do most of what I want. However, two things that bug me are the inability to have labels / units on the X-Axis for LineChart and the lack of simple way of specifying range for the Y axis. Are those features planned / would they be accepted in a PR if I get to implementing them (won't be immediately unfortunately).

Thanks :)

[feature request] step line chart

It would be great if there is a step line chart, like the chart below

_{Sent from PPHub}

License

What is this library licensed under? It'd be great to specify one with a LICENSE file.

Support for WatchOS

Hi buddy,

Issue:- I was unable to import this library to WatchOS Extension.

I have tried this awesome library. just want you to add support for watchOS too.

Thanks,
Saurabh Prajapati

Is there a way to change color of individual pie slices in the pie chart?

Hi There thanks for this great library!

I was playing with it but couldn't figure out how to change the color of the individual slices in the pie chart, or add text/images.. Is that possible?

Thanks!
Yair

Error when I import the package

Hello
I installed the package, and it worked, but when i wrote :

import SwiftUICharts

I got this error :
No such module 'SwiftUICharts'

If data array contains 0, LineView have crashes

How to reproduce:

LineView(data: [5,8,23,54,0,12,37,7,23,43], title: "Line chart")

Error in Beta 5, PieChartCell

When I use the Libary in Beta 5, I get an Error inside the path Computed Properties in the PieChartCell Struct. It will crash the Application

LineView in dark mode

As of now, the LineView always has a black background if the device is in dark mode. This is a problem if the chart is to be put on a different colored background (or simply a modal presented sheet).
Would you consider an option to add a dark mode background color as well?

Double or Float values

Please consider enabling double or float values for the line. Or maybe I just didn't find the option to enable?

Alternating bar colors

Hello,
what would be the smartest way to build a graph that compares two values and show each bar in a different color?

Thanks and kind regards

Form Redeclaration

I love this library and have uses it to jump start charting in a few of my apps. I recently was pulling my hair out trying to build a Form in an app that implements this library. I had a flaky and vague build issue (Argument passed to call that takes no arguments) whenever I tried to wrap views in a Form (SwiftUI form). I tracked the issue to a redeclaration of the struct Form in the Helpers.swift file in this library. Please rename this struct so it doesn't break SwiftUI Forms.

Updating the chart data

Hey,

I am currently doing:

LineView(data: self.insightData.chart.balances, dates: self.insightData.chart.dates)

self.insightData is a @published variable.

When the value of variable changes the chart crashes. Here is the error I keep getting.

Cannot convert value of type '[Double]' to expected argument type '[Int]'

Hi, after updating to the latest version (1.4.3) this error appeared. Xcode 11.3 (11C29).

ChartView fatal error drawing legend

Hi,

Getting this error when giving it data:

Fatal error: Unexpectedly found nil while unwrapping an Optional value: file

line pop out of view..?

Hey love your work with the charts
im use you charts to show a large amount of data and on some of the charts the line pops out of the view must be the Legend view that cut the view of the line..
my question is how do i fix this..?
it looks great on most view but a few the line pops out of the view..

AppPear/ChartView on CocoaPods

Hello,

First of all, wanted to say, this is an awesome project.
As of now, well explained from the README, we need to install this project by doing:

In xCode got to File -> Swift Packages -> Add Package Dependency and paste inthe repo's url: https://github.com/AppPear/ChartView

Would it make more sense to have some sort of management with CocoaPods, or Carthage and such instead?

Thank you

Apple Watch

Hi,

How can I use on Apple Watch?

Many thanks,

Bogdan

Can't preview the charts

I‘ve forked the swiftuicharts,and cloned by xcode.
but the charts can't be previewed.
for example,I select the multiLineChartView ,and click the preview
nothing display in the canvas

LineChartView always displays a constant 14

It appears the LineChartView always displays 14. The struct has an optional value but the initializer force unwraps the parameter causing it to crash if giving the value nil.

LineView's YLegend's values are bit off in the new release

Hi, I have recently noticed that YLegend's values in the Full-screen line view are a bit off. As you can see in the images attached below, the final point of 161 is below the 161 line.

BarChartView Bool error

On line 43 of BarChartView.swift, I get the following error...

Value of optional type 'Bool?' must be unwrapped to a value of type 'Bool'

Ability to remove or replace ecg image in bar charts

seems that is built in and there's no way to replace it? Would love to be able to add my own image there.

Single value or negative values cause no display

If you try inputting a single value into the the line view, nothing displays. I looked at the source code and it makes sense since you need 2 points to draw a line. Also, inputting any negative values will cause nothing to display. Support should be added for negative numbers as well.

Support for negative numbers in chart.

Test data:
LineView(data: [-2,1,0,2,-1,-2,1,0,-2,1,0,2,-1,-2,1,0,-2,1,0,2,-1,-2,1,0,-2], title: "title", legend: "legend")
Expected result: LineChart is correctly shown.
Actual result: All bars are shown in the upper part of chart.

Custom dropshadow and size

Hey, first: The charts look awesome!

But I wonder if it is possible to remove the drop shadow and make the chart fullscreen? At least being able to make a custom size for the line chart would be very nice.

While I like the idea of those small cards, the charts look and behave too good not to use them as full blown charts inside an app.

LineChartView indicator point in wrong position

Test data: [11, 3, 2, 5, 29, 9]

LineView not properly scaling with large values

When data array contains values below, the LineView looks how it does below.

[282.502, 284.495, 283.51, 285.019, 285.197, 286.118, 288.737, 288.455, 289.391, 287.691, 285.878, 286.46, 286.252, 284.652, 284.129, 284.188]

Is this project only for SwiftUI?

Can I use it in Storyboard project?

AppPear/ChartView - PieChartView support for segment/sector/pie description

Hello,

Wanted to say, this pie chart is simply beautiful.
If I may, the definition of a pie chart is: (taken randomly from any dictionary on the web)
pie chart
noun
a graphic representation of quantitative information by means of a circle divided into sectors, segment, in which the relative sizes of the areas (or central angles) of the sectors correspond to the relative sizes or proportions of the quantities.

Would it be possible to have a way to define the sectors, segments?

For instance, in your example:
PieChartView(data: [8,23,54,32], title: "Title", legend: "Legendary") // legend is optional

Would it be possible to do something like:
PieChartView(data: [8,23,54,32], segmentDescription: ["student", "active professional", "retired", "without job"], title: "category in % leaving in city X", legend: "Legendary") // legend is optional

So we can understand 8% are students, 23% are active professional, etc...

PieChartView(data: [8,23,54,32], segmentDescription: ["soccer player", "tennis player", "judo player", "gymnast"], title: "athlete going to the Olympic", legend: "Legendary") // legend is optional

So we can understand 8% are soccer players, 23% are tennis players, etc...

The main idea is to be able to provide description for one piece of the pie chart, not just an overall title/legend. For instance, in your picture, there is no way to say what corresponds to the smallest or biggest part of the pie without a lengthy Title/Legend.

I believe this would further increase the usage and the good experience using pie chart.

Thank you for your help

ForEach(_:content:)` should only be used for *constant* data.

When using ObservedObject data, errors like below:

`
@ObservedObject var dashboardDataModel: DashboardDataModel
......
BarChartView(data: ChartData(points: self.dashboardDataModel.response.data.pastThirtyDayChecksArray ),
title: "Checks",
form: ChartForm.medium, dropShadow: false
)

......
onAppear {
self.dashboardDataModel.fetchData()
}
the error:
ForEach<Range, Int, ModifiedContent<ModifiedContent<BarChartCell, _ScaleEffect>, _TransactionModifier>> count (30) != its initial count (0). ForEach(_:content:) should only be used for constant data. Instead conform data to Identifiable or use ForEach(_:id:content:) and provide an explicit id!
`

First try

Installed SwiftUICharts in the package manager in Xcode 11 beta 4. It is visible in the project navigator (Swift Package Dependencies).

I made a new SwiftUI file, called ChartView.

`import SwiftUI
import SwiftUICharts

struct ChartView: View {

var body: some View {
    
    ChartView(data: [12,17,24,33,23,56], title: "Chart two", form: Form.small)    }

}

#if DEBUG
struct ChartView_Previews: PreviewProvider {
static var previews: some View {
ChartView()
}
}
#endif
`

Now I'm getting an error "Argument passed to call that takes no arguments".