Swift-Charts-Examples icon indicating copy to clipboard operation
Swift-Charts-Examples copied to clipboard

Published 20 hours ago • verified publisher icon jordibruin

Add a section where we recreate certain Apple app charts

Open jordibruin opened this issue 2 years ago • 11 comments

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

jordibruin avatar Jun 25 '22 20:06 jordibruin

I love this idea, maybe a section on the top labelled "Apple" and recreate each one and try to find more!! 💪🏻

. .
IMG_9348 IMG_9359
IMG_9360 IMG_9361
IMG_9366 IMG_9365
IMG_9364 IMG_9363
IMG_9371 IMG_9370
IMG_9369 IMG_9368
IMG_9367 .

atrinh0 avatar Jun 26 '22 22:06 atrinh0

@lekawik made a great first start!!

jordibruin avatar Jun 30 '22 08:06 jordibruin

This chart is hot 🔥

ios-16-sleep-info

Source: https://www.macrumors.com/guide/ios-16-health-app/

atrinh0 avatar Jul 30 '22 12:07 atrinh0

Cycling elevation chart

apple-maps-cycling-directions

Source: https://www.macrumors.com/2022/08/02/apple-maps-cycling-directions-50-states/

atrinh0 avatar Aug 03 '22 11:08 atrinh0

This chart is hot 🔥

ios-16-sleep-info

Source: https://www.macrumors.com/guide/ios-16-health-app/

Any idea what's being used to connect the bar marks on this?

bdruth avatar Oct 28 '22 21:10 bdruth

This chart is hot 🔥

ios-16-sleep-info

Source: https://www.macrumors.com/guide/ios-16-health-app/

Any idea what's being used to connect the bar marks on this?

Same question. Any idea how the sleep chart could be tackled? Any evidence that this graph is created using swift charts framework?

nonameplum avatar Jan 26 '23 18:01 nonameplum

This chart is hot 🔥

ios-16-sleep-info

Source: https://www.macrumors.com/guide/ios-16-health-app/

Any idea what's being used to connect the bar marks on this?

Same question. Any idea how the sleep chart could be tackled? Any evidence that this graph is created using swift charts framework?

Any idea how the sleep chart could be tackled?

chengjunzhang61 avatar Aug 03 '23 19:08 chengjunzhang61

I have asked during the "Ask" sessions and Apple's engineer told me that the current Swift Charts API doesn't give such abilities to build a similar chart to Healt's app sleep graph. Maybe by creating overlays something similar could be achieved.

nonameplum avatar Oct 05 '23 08:10 nonameplum

Custom masking shapes on RectangleMark can make the chart similar to sleep one. Also, you can even create a mask on the whole plot area and mask using the chart content and apply one linear gradient. Here is an example that I achieved on iOS 16.0

https://github.com/jordibruin/Swift-Charts-Examples/assets/1753816/2635402e-0882-4aa6-a543-bc2d8e608bf7

nonameplum avatar Mar 15 '24 17:03 nonameplum

Custom masking shapes on RectangleMark can make the chart similar to sleep one. Also, you can even create a mask on the whole plot area and mask using the chart content and apply one linear gradient. Here is an example that I achieved on iOS 16.0

Simulator.Screen.Recording.-.iPhone.15.-.2024-02-08.at.10.25.09.mp4

@nonameplum Any chance you can share sample code for how you achieved this? I have been trying in a demo project but can't seem to figure it out.

Thanks!

mitchellporter avatar Jun 27 '24 23:06 mitchellporter