Chart

Preview

Weekly revenue as a bar chart. One column is Solid and carries its value, the other six rest in Soft, and a dashed line marks the average.

Chart ships with 16 types, plus Legend and Sparkline. Every drawing on this page is a live SVG colored only by tokens, so switch the theme and it redraws in Dark. The charts and the Sparkline play their entrance from the Figma file once, as you scroll to them.

Which chart should I use?

Pick by the shape of the data. A trend over time takes Line, a comparison between categories takes a bar, a share of a whole takes Donut, one value inside a known range takes Gauge.

The rules are the ones each Figma component states in its own description.

Line, Area and Candlestick

Use these when the x axis is time. Line compares two periods, Area splits one total into channels, Candlestick shows the range of a price on each day.

Line and Area curves are Catmull-Rom smoothing converted to cubic Beziers, so the curve bends between points and every point stays where the data put it. A curve that passes beside a data point misstates the data. Show Tooltip and Show Range are properties, and Range is a Segmented Control at Size Small with five tabs.

Bar, Grouped, Stacked, Horizontal and Waterfall

Use these to compare categories. Vertical bars suit days and months, Horizontal suits names, Waterfall suits a total that changes in steps.

Show Track draws a Weak track behind every column and is off by default, which is how the Preview draws Bar. Bars are 24 wide in a 41 wide column, columns are 12 apart, and every column stands on a baseline 8 above its label. On Bar a column is as tall as the value divided by the maximum, times 136, plus 48. Grouped and Stacked show no values on the bars.

Donut, Ring, Gauge, Bullet and Funnel

Use these for a share, a progress or a position: Donut and Ring for parts of a whole, Gauge for one value in a range, Bullet for a target, Funnel for conversion.

Donut segments start at twelve o'clock and run clockwise, 2 degrees apart, so a reader always starts in the same place. Ring arcs have butt ends. The Gauge value ends in round caps made of circles 20 across. In Bullet the tick is the target and the bar is where you are.

Heatmap, Scatter and Radar

Use these to show a pattern: Heatmap for intensity by day, Scatter for two measures at once, Radar for the profile of one subject on six axes.

Heatmap fills the 361 with 13 weeks of 22 wide cells and 3 between them. Its five levels are tokens on the brand ramp, so a level changes the token and a hand set fill never appears. Scatter sizes its dots by group, 6 to 10 across for New and 8 to 12 for Returning, with a ring in the surface color so overlaps stay separate.

What does every chart header carry?

Every chart opens with the same header: a title, a value and, on the time charts, a trend chip with a comparison text. Show Header turns it off when the surrounding card already carries a title.

The header is 88 high with a context row and 60 without one. Ring, Gauge, Bullet, Heatmap, Scatter and Radar use the short header, and Donut has none. Label, Value, Show Context and Context are properties, so the title and the figure are text you edit.

How many series does the palette carry?

Four. chart/series-1 to chart/series-4 are the categorical colors, and chart/muted and chart/soft are the neutrals a chart pairs with them. Past four series, switch to a bar chart or group the rest as Other.

Series 1 is the brand blue. Each series has a Light and a Dark value, listed in the Tokens table, and the Dark values differ from Light. Two charts use the brand ramp instead of series colors: Area takes alpha 72, 48 and 24, and Heatmap takes alpha 24, 48 and 72 below chart/series-1.

Sparkline and Legend

Two pieces every chart reuses, published so a list row or a metric card can use them too. Legend is the color key, Sparkline is a trend line that carries shape and no values.

Use Horizontal under a wide chart and Vertical beside a Donut or Ring, and order the rows by value, largest first. All Sparkline trends share one vertical domain of 0 to 20, so a flat trend sits at mid height and a rising one never fills the box. Pair a Sparkline with the number it belongs to.

Which parts build the charts?

Five parts build the charts. They are underscore components, kept out of the published library, and an instance of each sits inside the charts above.

Point Dimmed is 35 percent opacity. Column has a 16 value slot over the bar and a 16 label under it, so a column is the bar plus 48. Give the column its height and the bar fills what is left. Put Grid behind the marks.

Properties

Each chart is one component with Show and text properties and no variants. Legend and Sparkline are sets, and the five parts are sets or components of their own.

Line, Area, Stacked and Scatter draw a key row under the plot that has no property of its own.

Read from the component property definitions of the Chart page on October 2, 2026.

Tokens

Series colors are their own variables, so a rebrand moves the charts with the rest of the kit. Everything else is a neutral or state token the components already use.

The header context text binds text/soft-500, which resolves to the same values as fg/soft-500.

Read as bound variable names from the Chart page, Light and Dark, on October 2, 2026.

How do the charts compare with Swift Charts and Material 3?

Appetite UI draws its own charts, one set for both platforms. Apple ships charts as the Swift Charts framework and Material 3 publishes no chart component, so neither the iOS pages nor the Material 3 pages of the file carry a chart to mirror.

Charts belong to the platform neutral data layer next to Table, and the drawing is the same on iOS and on Android.

Apple's pages and the Material 3 pages in the Figma file have no chart, gauge or sparkline page, checked by name on October 2, 2026.

How do I label a chart for accessibility?

Give the plot an image role and a label that states the data, or put the values in a table beside it. A chart drawn as vectors is one picture to a screen reader, so the label has to carry what a sighted reader gets from the shapes.

• Write the label as data. Give the chart type, the subject, the period and the one fact the highlight states. Every specimen above does it, for example "Line chart: sessions this week against last week, Monday to Sunday. The week peaks on Saturday at 3,200."
• Expose the values yourself. On iOS use accessibilityLabel and accessibilityValue on each mark. On Android set contentDescription on the chart and a semantics node for each value. On the web give the svg role="img" and an aria-label, and keep a visually hidden table next to dense charts such as Heatmap, Scatter and Candlestick.
• Let color repeat a value. Waterfall prints a plus or minus sign, Funnel prints its drop, Bullet prints the percent beside the bar, and Donut and Ring print every value in the legend.
• Mind the contrast of small labels. In Light, the 12 point gain labels on Waterfall in state/success/base-500 measure 2.3 to 1 on white and the axis ticks in fg/soft-500 measure 3.3 to 1, so both repeat what a bar already says. A label that carries data on its own uses fg/sub-700 or fg/strong-950.
• Size the controls. The Range row is a Segmented Control at Size Small with segments 30 high, and its hit area still has to reach 44 pt on iOS and 48 dp on Android, the platform/min-touch-target values.
• Respect reduced motion. Draw the finished chart and skip the entrance. The specimens on this page play theirs only while prefers-reduced-motion allows motion, and otherwise open finished.

If a reader needs a number, show it as text next to the chart. The specimens above are pictures: none takes focus, and the Range row is hidden from assistive technology.

Guidelines

Charts fail when they promise more than they can show. Keep to the limits each set states.

Grouped is two series at most and Stacked is three segments at most. Show the drop between Funnel steps as well as the totals, and stop at four steps on a phone. Tone a Bullet by whether the target was met. Pair every Sparkline with the number it belongs to.

Count: 16 charts, plus Legend and Sparkline, on the Chart page of the Figma file.