# Chart

> A chart turns a set of numbers into a shape people can read at a glance. On a phone the choice is by the shape of the data: a trend takes a line, a comparison takes bars, a share of a whole takes a donut.

Page: https://www.appetiteui.com/glossary/chart. Mobile charts: line, bar, donut and when to use each. Also called Graph, Sparkline, Data visualization.

## Why it matters

A chart is visually prominent, so it earns the attention only when it makes one point clearly. Apple asks to keep it simple and to let people choose when they want more detail.

Charts are drawn, so they are invisible to a screen reader unless they carry labels. Apple calls accessibility labels for chart values crucial.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Charts, built with Swift Charts | No chart component in the file | Chart, Legend and Sparkline |
| Series colors | App’s own colors, in light and dark | App’s own colors, in light and dark | See below |
| Accessibility | Labels for values and components, plus accessibility elements | Descriptions for each value, as on iOS | See below |

## In Appetite UI

The Chart page picks by the shape of the data: Line for a trend, Area for parts of a total, Candlestick for open, high, low and close, Bar for one series over categories, Donut for a share and Gauge for one value in a known range. Four series colors follow light and dark.

In the Bar chart the highlighted column carries its value and the other columns rest in a Soft style, so the chart makes one point.

## Example

A fitness screen shows weekly distance as a bar chart with the best day highlighted and its value on the column, and a dashed line for the average.

## Common mistakes

- Packing every series into one chart. Show a summary and let people open the detail.
- Using an unfamiliar chart type for common data. Apple advises common types, such as bar and line charts.
- A chart with no labels for VoiceOver or TalkBack.
- Using color as the only way to tell series apart.

## Questions

### Which chart type should I use on a phone?

Pick by the shape of the data. A trend over time is a line, a comparison between categories is a bar, a share of a whole is a donut, and one value inside a known range is a gauge.

### Should every set of numbers be a chart?

No. Apple says that if you only need to provide data, a list or table people can scroll, search and sort may serve better.

## Sources

1. [Apple Human Interface Guidelines: Charting data](https://developer.apple.com/design/human-interface-guidelines/charting-data)

## Related

- Docs: [Chart](https://www.appetiteui.com/docs/chart)
- Docs: [Colors](https://www.appetiteui.com/docs/colors)
- Glossary: [Data table](https://www.appetiteui.com/glossary/data-table)
- Glossary: [Semantic tokens](https://www.appetiteui.com/glossary/semantic-tokens)
- Glossary: [Dark mode](https://www.appetiteui.com/glossary/dark-mode)