jordibruin/swift-charts-examples

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

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.

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

Horizontal Scrolling Bar Chart

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

Other Example Repos

Check out my other example repos

🪧 TipKit

🏝️ Dynamic Island

🥽 visionOS

swift-charts-examples's Issues

Add list of missing charts from the screenshots to readme

To make it easier for us to know which charts need to be added still it would be nice to have an overview in the readme

Doesn't compile for macOS

The Build.xcconfig file contains macOS as a viable target. When trying to build for macOS though, there are 46 errors because there is a lot of iOS-specific code

Couldn't load project.

I downloaded the project and try to open Swift Charts Examples. xcworkspace.
But I can't see anything. Please refer image below.

Warning "plotAreaFrame' was deprecated in iOS 17..." in the SingleLineLollipop Example

As the title says, the 'plotAreaFrame' was deprecated in iOS 17.

Found in the SingleLineLollipop example. "let lineX = startPositionX1 + geo[proxy.plotAreaFrame].origin.x"

CustomizableHeatMapDetail has issues

@Elichartnett depending on the number of rows and columns there are sometimes empty rows and columns:

Any clue how to clean this up?

Time sheet bar lollipop gets truncated on the edges

The lollipop for Time Sheet Bar is truncated when viewing the first bars.

Can the GradientLine graph be cut when there is missing data?

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.

Screen.Recording.2022-06-15.at.9.56.13.am.mov

Weird Redrawing of Chart

I have been playing around with SingleLineLollipop.swift and noticed this weird redrawing behavior. I set a break point on line 42 and then run the example on my device/sim ( either doesn't matter ). Every time I touch the screen and drag, the break point gets triggered and the app pauses. At first I thought, ok this makes sense, the selectedElement state var updates, and the chart needs to redraw the chartBackground. No problem. But as you can imagine this isn't ideal... for large data sets I noticed there is a delay / animation hitch when the user drags her finger across the chart. So I thought to extract the state var and the chartBackground to a separate view. But no matter how I extract them, the chart ALWAYS redraws. How can I create a view like you have in the chart background that has data about the x value the user is currently touching and have it update without the whole chart updating?

Please give feedback on how we should format the detail pages

Right now I've added a simple chart and then some controls below to adjust settings related to the chart. Any suggestions would be great!

Candle Stick Chart performance and lollipop placement

Upon dragging over the Candle Stick Chart to move the lollipop, it feels sluggish, also when moving to the left edge and right edges of the chart, the lollipop placement is off the chart (pun intended).

Compared to the lollipop from the Apple implementation of Line Chart with Lollipop the performance and range edges are not an issue.

add a heat map using ReactangleMarks and label the x-axis and y-axis

It's pretty easy to use RectangleMarks to create a heat map, but getting the axis labels to display correctly is proving quite difficult.

Add customisation options to all charts

We should try to add the basic customisation options to all available charts. These can be copied from the Simple Line Chart Detail for now.

Add an overview with images and descriptions and customization options to README

It would be nice to have an overview of all the charts that are in the app in the readme. We probably need to come up with a format for this. Maybe we can use the ImageRenderer to extract an image of each graph in the same dimensions?

Scrolling CPU % utilization type graph

Hello,

I need a script chart type graph, similar to the one in windows task manager that shows a scrolling graph of CPU utilization over time.

Do you have something like that?

Where it only plots the last several data points, and scrolls over as each new point is added, sort of like a electrocardiogram, or a heart rate monitor where only the last few data points are kept and plotted in an infinitely scrolling one way graph.

Thanks

The project doesn't compile.

Just to be sure I didn't do something incorrectly I cloned the project from scratch into a junk directory. I got the same compile error.

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.

RPReplay_Final1657032449.MP4

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.

Make all charts accessible

Adding simple accessibility labels and values goes a long way in making it the standard for people when they use these charts as examples.

Please add these to your sample charts:
.accessibilityLabel("(element.ageRange)")
.accessibilityValue("(element.percentage)")

Add iOS17 Pie and Donut charts

Apple Documentation on sector marks: https://developer.apple.com/documentation/charts/sectormark

Convert all charts to use the isOverview pattern

To show the chart in the overview page and on the detail page, we should switch between how they are displayed according to a boolean. Some charts already implement this like the SingleLineLollipop. It would be nice to have a consistent way across the project to handle this.

Previews are broken

Ongoing list of issues with broken previews:

Screen	Status
HeatMap	Resolved
SoundBars	Resolved
ContentView	#86 (comment)
Pyramid	#86 (comment)

Sleep stages graph

I was implementing the Sleep Stages (Awake, REM, Core, Deep) graph using the BarMark. The plot matches that of the Apple's Health App, but I could not manage to put the connecting lines as shown in the Apple Health app. Can anybody tell me how to implement the connecting lines between Bar Marks.

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

Add combine charts

Can we add multiple charts in a view？
Display all charts on the same view and coordinate system is unified

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.

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:

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:

Do I misunderstand .inset(_:)?

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