An overview of the different types of charts you can make with Swift Charts

Overview

Swift Charts Examples

This repo aims to provide sample code for lots of different chart types for you to use as inspiration for your own projects. We start by recreating the sample charts Apple uses in their sessions related to Swift Charts. The goal is to make each chart type customizable, accessible and flexible so that you can easily change it to your needs.

image

Todo

  • Add missing Charts
  • Multi-language Support
  • First row, second bar with the lines with blocks in the middle
  • Sleep stages chart
  • iPhone battery percentage screen with different colors and overlaid bar
  • Make all charts (even more) accessible

See the open issues if you think anything is missing from this list. You can also contact me on Twitter if you have any suggestions or feedback.

How to add a new chart

Each chart needs a preview chart as well as a detail view. The preview chart is used in the home screen of the app for easier navigation. Look at the Simple Line Chart code to see what the format should be for the preview charts. On the detail view, make sure you add some customisation options in a separate section from the chart. If you have any questions feel free to create an issue.

Source: https://developer.apple.com/videos/play/wwdc2022/10137/

Chart Types

Apple

Electrocardiograms (ECG)

iPhone Storage

Screen Time

Line Charts

Line Chart

Line Chart with Lollipop

Animating Line

Line with changing gradient

Line Charts

Line Point

Bar Charts

Single Bar

Single Bar with Threshold Rule Mark

Two Bars

Pyramid

Time Sheet Bar

Sound Bar

Area Charts

Area Chart

Stacked Area Chart

Range Charts

Range Chart

Heart Rate Range Chart

Candle Stick Chart

Heat Maps

Customizable Heat Map

GitHub Contributions Graph

Point Charts

Scatter Chart

Vector Field

Comments
  • Add accessibilityLabel/Value to sample charts

    Add accessibilityLabel/Value to sample charts

    Thanks for creating this project! I've gone ahead and started working on Issue #24 by adding accessibilityLabel and accessibilityValue to Line and the Bar charts that did not have the attributes set.

    Before I continue with the other charts, I did want to bring up one difference between the simple and detail views that I think is worth exploring - namely that for the simple charts that are previews, it may not make sense to have VoiceOver users traverse all data points inline. Instead in BarChartSimpleOverview I manually set the accessibilityChartDescriptor modifier to only allow audio graph use with the cell label acting as the accessibilityLabel. The detail views continue having the full default SwiftChart accessibility.

    Since this is also an example repository that people may copy paste from - I'm not sure of the value of the above differentiation between simple/detail view accessibility. However, I'm happy to make changes either way based on your thoughts and have marked this a draft for now.

    opened by mathewa6 9
  • Previews are broken

    Previews are broken

    Ongoing list of issues with broken previews:

    Screen | Status --|-- HeatMap | Resolved SoundBars | Resolved ContentView | https://github.com/jordibruin/Swift-Charts-Examples/issues/86#issuecomment-1187939093 Pyramid | https://github.com/jordibruin/Swift-Charts-Examples/issues/86#issuecomment-1189110360

    opened by jordibruin 6
  • Is anyone else noticing the app lagging?

    Is anyone else noticing the app lagging?

    Is it just Xcode being Xcode, or the sample app is becoming laggy with all those charts? Testing on a simulator since I don't have iOS16 Beta installed.

    https://user-images.githubusercontent.com/30866972/173708500-f03c7daa-c64f-4808-8160-f5380cf70053.mov

    opened by theedov 6
  • updates project setup

    updates project setup

    • adds MIT LICENSE
    • adds Build.xcconfig for cross-platform development
    • adds workspace to better integrate with Swift packages
    • defines Template Macros for source file header
    • updates existing source files to use common header
    opened by brennanMKE 5
  • Adds Candle Stick Chart with Annotation to Bar Charts

    Adds Candle Stick Chart with Annotation to Bar Charts

    Hi, this repo is a great idea and I want to contribute my own chart to it which I think anyone planning on making a stocks app would find useful!

    This PR will add a candle stick chart to the Bar Charts Folder. I made it and wrote a blog post a few days ago before coming across this repo and I think it will make a good addition (hopefully you'll agree :)).

    Hopefully, I have followed the instructions you have laid out for adding a chart to the repo - but let me know if I have missed anything! Cheers :)

    opened by tommy-holmes 4
  • Improve candle chart annotation performance and fix truncated edges

    Improve candle chart annotation performance and fix truncated edges

    Fixes https://github.com/jordibruin/Swift-Charts-Examples/issues/65

    Before

    https://user-images.githubusercontent.com/16542463/175368631-528b8271-9144-47e1-abe6-2e6de83e656e.mp4

    After

    https://user-images.githubusercontent.com/16542463/175368446-64f04acf-b777-44f0-bf0b-1fb70c92f0d3.mp4

    opened by atrinh0 3
  • MarkDimension not working as expected. Someone an idea? Is this a bug?

    MarkDimension not working as expected. Someone an idea? Is this a bug?

    I tried to add the bottom right chart to the repo but there seems to be bugs in the beta 1.

    Reading the documentation of MarkDimension, I assume that using .inset(0) should fill the step size. If I understand it correctly this should result in rectangles next to each other filling the whole space, as desired. Screenshot 2022-06-16 at 22 40 48

    But when I create a chart like this:

    Chart(data) { rectData in
      RectangleMark(x: .value("x", rectData.a),
                    y: .value("y", rectData.b),
                    width: .inset(0),
                    height: .inset(0))
      .foregroundStyle(by: .value("Value", rectData.value))
    }
    

    the result is an empty chart:

    Screenshot 2022-06-16 at 22 46 12

    I get it to work with the following code (works but uses hard-coded values for the step size):

    Chart(data) { rectData in
      RectangleMark(xStart: .value("minA", rectData.a),
                    xEnd: .value("maxA", rectData.a + 1),
                    yStart: .value("minB", rectData.b),
                    yEnd: .value("minB", rectData.b + 1.0))
        .foregroundStyle(by: .value("Value", rectData.value))
    }
    

    The result:

    Screenshot 2022-06-16 at 22 48 29

    Do I misunderstand .inset(_:)?

    By the way, .ratio(1) doesn't work as well.

    opened by dasdom 3
  • Heart Rate example

    Heart Rate example

    The existing Range Chart is capable of displaying Apple's heart rate chart in the Health app. Included is an example of a semi-complete version of it. Simulator Screen Shot - iPhone 13 - 2022-06-13 at 20 08 32 image

    Apple's: image

    opened by dariusngo 3
  • Add lollipop 🍭

    Add lollipop 🍭

    Overview | Detail --|-- Simulator Screen Shot - iPhone 13 Pro Max - 2022-06-13 at 22 09 49 | Simulator Screen Shot - iPhone 13 Pro Max - 2022-06-13 at 22 09 51

    https://user-images.githubusercontent.com/16542463/173411718-db65e61c-5cae-4933-87d3-870b98291de0.mp4

    Code based on https://developer.apple.com/documentation/charts/visualizing_your_app_s_data

    opened by atrinh0 3
  • Cosmetic updates

    Cosmetic updates

    Update layout of main menu by extracting the label from the overviews. Extract labels from overview so we have nice crisp text instead of rendered text. (Also simplifies the Overview views as well) Add padding and rounded corners to chart images, looks nicer in dark mode. Update scatter chart to show symbols, looks better with different symbols. Rename the test file to ChartScreenshotGenerator. Reduce the height of the One dimension bar for added realism. Update the Image renderer to use uiImage renditions instead of cgImage only to convert it to UIImage. Add gradients to charts to make them pop.

    Before | After --|-- Simulator Screen Shot - iPhone 13 Pro Max - 2022-06-17 at 15 07 06 | Simulator Screen Shot - iPhone 13 Pro Max - 2022-06-18 at 10 18 24 Simulator Screen Shot - iPhone 13 Pro Max - 2022-06-17 at 15 07 18 | Simulator Screen Shot - iPhone 13 Pro Max - 2022-06-18 at 10 18 58 Screenshot 2022-06-17 at 15 15 21 | Screenshot 2022-06-17 at 15 16 36

    opened by atrinh0 2
  • Fix issue with empty heat map cells at the cost of removing annotations support

    Fix issue with empty heat map cells at the cost of removing annotations support

    Fixes https://github.com/jordibruin/Swift-Charts-Examples/issues/22

    https://user-images.githubusercontent.com/16542463/173590227-a3fa53a0-5c0e-47fc-9cba-b14f77c2d812.mp4

    opened by atrinh0 2
  • Add a scrolling graph

    Add a scrolling graph

    The Apple Health app contains a graph that you can scroll. I think this would also be a good use case to implement.

    I have no clue where to start yet, but maybe we can figure something out.

    https://user-images.githubusercontent.com/11280647/177356069-a2ed2eb7-3a82-41a9-a3af-7e3d4b172faa.MP4

    Not Possible (right now) 
    opened by scsinke 9
  • Add a section where we recreate certain Apple app charts

    Add a section where we recreate certain Apple app charts

    I think it could be a nice challenge / addition to the repo if we have a section in the app where we recreate common charts used throughout iOS.

    Think screen time, battery, iCloud usage, weather etc

    help wanted 
    opened by jordibruin 5
  • Standardise customisation across charts

    Standardise customisation across charts

    It would be great to have a standard list of customisable options per chart. A new chart template or something could be nice as well so that people can copy that in, and then start adding their code.

    opened by jordibruin 0
Owner
Jordi Bruin
Jordi Bruin
Light weight charts view generater for iOS. Written in Swift.

# ###Light weight charts view generater for iOS. Written in Swift. Requirements iOS 8.0+ XCode 7.3+ Installation CocoaPods $ pod init specify it in yo

Recruit Holdings. Media Technology Lab 982 Nov 16, 2022
Health Sample app using Swift, RxSwift, Anchorage, Charts

HealthSample First run pod install, then build the project and run in your devices or simulators. This project has used RIBs, Swift, RxSwift, Anchorag

null 4 Feb 11, 2022
Using Swift Charts and Voiceover Chart Descriptor to compose music. 🤯

Chart de lune ?? Using Swift Charts and Voiceover Chart Descriptor to compose music. ?? Image source: https://hadikarimi.com/portfolio/claude-debussy-

An Trinh 31 Nov 21, 2022
Beautiful charts for iOS/tvOS/OSX! The Apple side of the crossplatform MPAndroidChart.

One more heads up: As Swift evolves, if you are not using the latest Swift compiler, you shouldn't check out the master branch. Instead, you should go to the release page and pick up whatever suits you.

Daniel Cohen Gindi 26.3k Jan 3, 2023
SwiftCharts - Easy to use and highly customizable charts library for iOS

SwiftCharts Easy to use and highly customizable charts library for iOS Features: Bars - plain, stacked, grouped, horizontal, vertical Scatter Lines (s

Ivan Schütz 2.4k Jan 4, 2023
🎉 SwiftUI stock charts for iOS

SwiftUI Stock Charts Display interactive stock charts easily ?? Instalation In Xcode go to File -> Swift packages -> Add package dependency Copy and p

Dennis Concepción Martín 94 Dec 26, 2022
🎉 SwiftUI stock charts for iOS

?? SwiftUI stock charts for iOS

Dennis Concepción Martín 94 Dec 26, 2022
SwiftUI Charts with custom styles

SwiftUI Charts Build custom charts with SwiftUI Styles Line Chart(data: [0.1, 0.3, 0.2, 0.5, 0.4, 0.9, 0.1]) .chartStyle( LineChartStyle(.

SpaceNation 609 Jan 6, 2023
A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

⚡ A powerful & easy to use chart library for Android ⚡ Charts is the iOS version of this library Table of Contents Quick Start Gradle Maven Documentat

Philipp Jahoda 36k Jan 5, 2023
An iOS wrapper for ChartJS. Easily build animated charts by leveraging the power of native Obj-C code.

TWRCharts TWRCharts An Obj-C wrapper for ChartJS. Easily build animated charts by leveraging the power of native code. TWRCharts is yet another charti

Michelangelo Chasseur 363 Nov 28, 2022
Easy to use and highly customizable pie charts library for iOS

PieCharts Easy to use and highly customizable pie charts library for iOS Swift 4.2, iOS 8+ Video Features: Customizable slices Add overlays using simp

null 503 Dec 6, 2022
Core Charts | Basic Scrollable Chart Library for iOS

Core Charts | Basic Chart Library for iOS HCoreBarChart VCoreBarChart Requirements Installation Usage Appearance Customization Getting Started You nee

Çağrı ÇOLAK 71 Nov 17, 2022
SwiftUICharts - A charts / plotting library for SwiftUI.

A charts / plotting library for SwiftUI. Works on macOS, iOS, watchOS, and tvOS and has accessibility features built in.

Will Dale 632 Jan 3, 2023
FLCharts: Easy to use and highly customizable charts library for iOS

FLCharts Requirements Xcode 11 / Swift 5 iOS >= 11.0 Installation FLCharts is av

Francesco Leoni 250 Dec 26, 2022
Beautiful charts for iOS/tvOS/OSX! The Apple side of the crossplatform MPAndroidChart.

Version 4.0.0, synced to MPAndroidChart #f6a398b Just a heads up: Charts 3.0 has some breaking changes. Please read the release/migration notes. Anoth

Daniel Cohen Gindi 26.3k Jan 8, 2023
Aplikasi iOS kasus Covid-19 di U.S dengan Storyboard, Framework Charts dari danielgindi, dan API dari covidtracking.com

Aplikasi iOS kasus Covid-19 di U.S dengan Storyboard, Framework Charts dari danielgindi, dan API dari covidtracking.com

DK 7 Aug 1, 2022
Easy to use and highly customizable pie charts library for iOS

PieCharts Easy to use and highly customizable pie charts library for iOS Swift 4.2, iOS 8+ Video Features: Customizable slices Add overlays using simp

null 503 Dec 6, 2022
Meet cute and very flexibility library for iOS application for different data view in one circle diagram.

SMDiagramViewSwift Meet cute and very flexibility library for iOS application for different data view in one circle diagram. The opportunity of transf

VRG Soft 42 Sep 17, 2022