WWDC 22 Digital Design Lounge — Design an Effective Chart

Design app experiences with charts - WWDC22 - Videos - Apple Developer
Learn how you can enhance your app with charts to communicate data with more clarity and appeal. We’ll show you when to use charts, how...

Best Practices

More of an abstract question: Taking the Fitness app as an example, the calendar view tends to stick out as a completely separate design pattern. Are there any guidelines on when you would want to implement charting in a calendar as opposed to a tabbed interfaced that grouped by day/week/month etc.?

That's a great question! The Fitness app is focused on a daily activity like closing your rings. Since this is a top-level goal of the app, the calendar view makes it easy to see your successes through time.

The Health app mirrors the same information but in a longitudinal form, where you can see larger trends.

I guess what I'm trying to wrap my head around is finding the medium of digest-able information and too much but that's the joy of design!

Each of these approaches has its advantages. The calendar view excels at showing streaks and achievements relative to the day of the week. Conversely, the charts in Health aggregate away those daily details into larger trends.

Yeah, it’s interesting to me that the calendar format is sort of perfect for the Activity Rings in that they can be displayed neatly in rows / columns on a calendar grid.

Please tell me if I'm missing important nuance here but would it be fair to boil the different scales down to:

Macro scale = highlighting all regions of all marks
Medium scale = highlighting same region across all marks
Micro = highlighting a specific region of a specific mark

That sounds right, as long as with Micro the highlight is about a single data point (since a chart mark could represent multiple data points).

What considerations should be made when designing a time-based chart like Safari's inspector timeline?

One of the most important considerations is that each mark has a start-time, and end-time and a duration. So it will be important to have a UI that reveals all of these pieces of data for each mark.


What are the best practices for using color in charts (such as considering accessibility for color blindness)?

Great question! We talk about these best practices in the “Color” section of our companion talk, Design and effective chart.

At a high level, here are some key concepts to think about when using color in charts:

  • Use color to enhance
  • Consider associated meanings
  • Balance visual weight
  • Choose distinct colors
  • Respect system settings

You can also find general best practices around color in the Human Interface Guidelines: https://developer.apple.com/design/human-interface-guidelines/foundations/color/.


Is it possible to zoom in on a SwiftUI chart? I.e., pinch and zoom to see details closer up? Could you tap on a bar (or other mark) to open a new view, for example, showing a list of the items presented in that bar?

Great questions!

(1) This might depend on what behavior you're looking for. There currently isn't a pinch + zoom API built directly into Swift Charts, but you could capture a the gesture in a chartOverlay and respond to it accordingly by manipulating the scale / data in the chart.

(2) Yes! Absolutely. Using a chartOverlay and the provided ChartProxy to read the data point being tapped.

There are some great examples of these in the Swift Charts sample app (https://developer.apple.com/documentation/charts/visualizing_your_app_s_data).

Check out the "Swift Charts: Raise the bar" talk too! Donghao explains more there. https://developer.apple.com/videos/play/wwdc2022/10137/


Is it possible to decide the number of decimals if the numbers on one of the axes are really close to each other, e.g. a range from 0 to 1 with 5 lines

A swift charts question I'm assuming! The framework can truncate labels for you to fit the space, but otherwise you could write in some logic to format the labels according to the space you have available.

With Swift Charts, is it possible to reproduce the scrollable chart we find in Health App (where the chart is updated as we scroll the content)? I know we can use gestures on the chart to highlight some marks, but what about pan gesture?

Any Chart can be placed in a scroll view, but I'm guessing you are interested in the "pinned" Y axis behavior. You should be able to achieve this with a workaround, that is by ZStacking the Y axis on top of the scrolling chart. Please file a radar if this is a feature you want to get added to the API! We'd love to make this easier for you, feature request this please!

Is there any sense in adding animations to Charts (w/o user interaction) or its a bad practice?

When used properly, animation can certainly enhance your chart… even when not tied to user interaction. For example, to indicate that a chart has updated, animating a point or growing a bar can be a helpful and delightful addition.

Note that when adding animation, it’s also important to ensure they adapt as needed for a device’s “Reduce Motion” accessibility setting.


Will there be some samples on building good-looking Watch Fitness apps like in the WWCD21 Session? I would love some samples showing off the design techniques used in this years Watch Workout app.

Very much agree that the new Workout app is quite inspiring. There isn’t currently a code-along for it, but we will try to continue to update the HIG, Design Resources, and developer documentation with new patterns and techniques.

Show Comments