--- title: "Charts UI: anatomy, variants and examples | Kombai" description: "Charts turn numbers into lines, bars and slices, so people can see trends, comparisons and parts of a whole at a glance." canonical_url: https://kombai.com/glossary/charts/ author: "The Kombai Team" --- # Charts Charts turn numbers into lines, bars and slices, so people can see trends, comparisons and parts of a whole at a glance. - Also called: graph, data visualization - Platforms: Web, Mobile - In the Kombai gallery: [250 web designs](https://kombai.com/gallery/web/charts/), [165 mobile designs](https://kombai.com/gallery/mobile/charts/) - [Larkspur](https://kombai.com/gallery/inspirations/charts-web-211/) (Web) - [Investing](https://kombai.com/gallery/inspirations/charts-ios-145/) (Mobile) - [Kolvane](https://kombai.com/gallery/inspirations/charts-ios-13/) (Mobile) ## What are charts? Charts are graphics that show numbers as position, length, angle or area, so patterns stand out before anyone reads a value. A line shows change over time, bars compare amounts, and a donut splits one whole into parts. - Axes, gridlines and a legend tell people how to read the marks. - A title says what is measured, and a tooltip gives the exact values. ## When to use charts - **Trends over time.** Visits, prices or sleep across days, weeks or years. - **Comparisons.** Spend by category or sales by month, side by side. - **A takeaway at a glance.** The shape of the data matters more than any one value. ## When not to use one - **Exact values matter.** If people look up or copy numbers, use a table. - **A single number.** One figure reads faster as a big stat than as a chart. - **Too many series.** Past a handful of lines or slices, a chart turns to noise. Split it. ## Anatomy 1. **Title**: Names the measure and period 2. **Axes**: Scale, labels and gridlines 3. **Series**: The lines, bars or slices 4. **Legend**: Names and toggles each series 5. **Tooltip**: Exact values on hover or focus 6. **States**: Loading, empty, hover, focus ## Variants We sorted every chart design in the Kombai gallery and found six patterns. ### 1. Line and area charts The default for change over time, like a price, a balance or daily visitors. An area fill under the line shows volume. - [Larkspur](https://kombai.com/gallery/inspirations/charts-web-237/) (Web) - [Halcyon](https://kombai.com/gallery/inspirations/charts-ios-113/) (Mobile) - [Calder](https://kombai.com/gallery/inspirations/charts-ios-67/) (Mobile) ### 2. Bar and column charts Bars compare amounts across days, months or categories. Stacked bars split each one into parts, and a dashed line marks the average. - [Lull](https://kombai.com/gallery/inspirations/charts-ios-65/) (Mobile) - [Larkway](https://kombai.com/gallery/inspirations/charts-web-85/) (Web) - [Kestrel](https://kombai.com/gallery/inspirations/charts-ios-61/) (Mobile) ### 3. Donut and pie charts Slices of one whole, like a portfolio split or spend by category, often with a key figure in the middle of the donut. - [Investing](https://kombai.com/gallery/inspirations/charts-ios-131/) (Mobile) - [Kestrel](https://kombai.com/gallery/inspirations/charts-web-71/) (Web) - [Reeltide Transparency](https://kombai.com/gallery/inspirations/charts-web-231/) (Web) ### 4. Rings and gauges One value against a goal or a scale, like calories eaten today or a credit score from 300 to 850. - [Macroline](https://kombai.com/gallery/inspirations/charts-ios-36/) (Mobile) - [Nudge](https://kombai.com/gallery/inspirations/charts-ios-33/) (Mobile) - [Halloway](https://kombai.com/gallery/inspirations/charts-ios-78/) (Mobile) ### 5. Funnels Bars that shrink stage by stage, showing how many people make it from one step to the next and where they drop off. - [Halyard](https://kombai.com/gallery/inspirations/charts-web-235/) (Web) - [Sundial](https://kombai.com/gallery/inspirations/charts-web-204/) (Web) - [Lodestar](https://kombai.com/gallery/inspirations/charts-web-95/) (Web) ### 6. Candlesticks, radars and heatmaps Specialist charts for one job each: price swings on a trading screen, scores across several skills, and the busiest hours of the week. - [Cairnwell](https://kombai.com/gallery/inspirations/charts-web-87/) (Web) - [Sablefield](https://kombai.com/gallery/inspirations/charts-web-198/) (Web) - [Marlowe](https://kombai.com/gallery/inspirations/charts-web-100/) (Web) ## Where charts show up ### Analytics dashboards Traffic, usage and time-tracking reports lead with one wide chart, often under a row of totals. - [Loftline](https://kombai.com/gallery/inspirations/charts-web-173/) (Web) - [Sundial](https://kombai.com/gallery/inspirations/charts-web-199/) (Web) - [Halden](https://kombai.com/gallery/inspirations/charts-web-144/) (Web) ### Money and investing Price history on a stock, spending by week or month, and where the money went by category. - [Kestrel](https://kombai.com/gallery/inspirations/charts-ios-165/) (Mobile) - [Spending](https://kombai.com/gallery/inspirations/charts-ios-116/) (Mobile) - [Tidewell](https://kombai.com/gallery/inspirations/charts-web-151/) (Web) ### Health and fitness Sleep stages, daily steps and heart rate, often drawn against an average or a typical range. - [Duskline](https://kombai.com/gallery/inspirations/charts-ios-95/) (Mobile) - [Thistle](https://kombai.com/gallery/inspirations/charts-ios-102/) (Mobile) - [Rensfell](https://kombai.com/gallery/inspirations/charts-ios-14/) (Mobile) ### Data stories Charts set inside an article or a report, under a headline that says what the data shows. - [Tangent](https://kombai.com/gallery/inspirations/charts-ios-137/) (Mobile) - [Fernaby](https://kombai.com/gallery/inspirations/charts-ios-9/) (Mobile) - [Waypost Travel Pulse](https://kombai.com/gallery/inspirations/charts-web-226/) (Web) ## Charts vs similar components | | [Charts](https://kombai.com/glossary/charts/) | [Table](https://kombai.com/glossary/table/) | [Stats section](https://kombai.com/glossary/stats-section/) | |---|---|---|---| | Shows | The shape of the data | Every value, exactly | A few headline numbers | | Answers | Is it rising? Which is biggest? | What is the exact value? | How big is it? | | Best for | Trends, comparisons and parts of a whole | Looking up, sorting and copying values | Summing up results on a page | ## Build notes - Give every chart a title that names the measure and the period, plus a one-line takeaway. - Offer the same data as a table. A chart is a complex image and needs a text alternative. - Don't rely on color alone. Label series directly, or vary the line style and marker shape. - Keep lines and bars at a 3:1 contrast ratio or more against the background. - Show exact values on keyboard focus as well as on hover. - Start bar charts at zero, and give a series the same color in every chart that shows it. ## FAQ ### Which chart type should I use? A line for change over time, bars to compare amounts across categories, a donut or pie for parts of one whole, and a ring or gauge for one value against a goal. When in doubt, pick a bar or line chart, since most people already know how to read them. ### When is a pie chart a bad idea? When it has more than a few slices or the values sit close together. Slices of nearly the same size are hard to tell apart, so a sorted bar chart reads better. ### How do you make a chart accessible? Give it a title and a short summary of what it shows, and offer the data as a table. Don't use color as the only way to tell series apart, keep lines and bars at 3:1 contrast against the background, and make tooltips reachable by keyboard. ### Should the y-axis start at zero? For bar charts, yes. A bar's length stands for its value, so a cut axis makes small gaps look large. A line chart can start near its lowest value when the shape of the change matters more than its size. ## Related terms - [Table](https://kombai.com/glossary/table/) - [Stats section](https://kombai.com/glossary/stats-section/) - [Progress indicator](https://kombai.com/glossary/progress-indicator/) - [Card](https://kombai.com/glossary/card/) ## References - [Apple Human Interface Guidelines: Charting data](https://developer.apple.com/design/human-interface-guidelines/charting-data) - [W3C WAI Images tutorial: Complex images](https://www.w3.org/WAI/tutorials/images/complex/) - [WCAG 2.2: Understanding Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) - [WCAG 2.2: Understanding Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)