# How to Make a Pictorial Bar Chart in Figma (Repeat, Clip or Stretch)
_August 27, 2026 · 11 min read · by Systergon_
> A pictorial bar replaces the rectangle with a picture. Done properly it tells you what the chart is about before you read the axis; done carelessly it is the classic way charts lie. Only two of the three ways to size an icon are honest, the isotype tradition settled which one, and six ECharts options do all the work.
Tags: Figma, Charts, Pictorial Bar, Isotype, Plugin
URL: https://systergon.com/blog/figma-charts-pictorial-bar
---
[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [See the pictorial gallery →](https://systergon.com/figma-charts/chart-types/pictorialbar)

A pictorial bar chart replaces the rectangle with a picture. The encoding is unchanged — length from a common baseline, the most accurate channel there is — and the mark becomes a tree, a car, a bottle, a person. Done properly it is a [bar chart](https://systergon.com/blog/figma-charts-bar-chart) that tells you what it is about before you read the axis. Done carelessly it is the classic way charts lie.

![A pictorial bar chart of water content drawn by ECharts inside the Figma Charts plugin](https://systergon.com/blog/figma-charts-pictorial-bar/images/pictorial-water.svg)

_Real plugin output: an ECharts pictorial bar captured from the editor. Every chart on this page is the library’s own drawing._

The difference between the two is one rule about how the picture grows, and this page is mostly about that rule — plus the six shapes this technique actually takes, all of which are in the plugin.

## First — get the plugin

Everything below happens inside **Figma Charts**, a Figma plugin. It runs the real JavaScript charting libraries — Google Charts, Highcharts, D3-based Nivo, ApexCharts and Apache ECharts — inside the plugin window, so the symbols on your canvas are the library’s own rendering.

[Install Figma Charts from the Figma Community →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts)

Press **⌘/** (**Ctrl /** on Windows), type _Figma Charts_, hit Enter, and pick **Pictorial Bar** from the category filter. Seven examples, all ECharts — the only library here with the type.

## Repeat, clip or stretch — only two are honest

Three ways a picture can carry a value, and the difference is the whole subject:

- **Repeat.** Ten units, ten identical symbols. The reader counts, exactly as in a [waffle chart](https://systergon.com/blog/figma-charts-waffle-chart), and nothing is distorted. This is the isotype tradition and it is always defensible.
- **Clip.** One symbol, filled to a proportion — a bottle three-quarters full, a battery at 40%. The outline is constant and the fill carries the value, so the encoding is length or area within a fixed frame. Also honest, and the most designable of the three.
- **Stretch.** One symbol scaled to the value. This is the one that misleads: scaling a picture in both dimensions squares the impression, so a value twice as large occupies four times the ink — and scaling in one dimension distorts the picture until it stops reading as the thing it depicts.

The rule to carry away: **repeat the symbol or clip it, never scale it in two dimensions**. ECharts’ pictorial bar supports all three, so the honesty is a configuration choice rather than something the library enforces.

## Six pictorial charts, and what each does with the picture

![A pictorial bar chart showing expansion of forest drawn by ECharts](https://systergon.com/blog/figma-charts-pictorial-bar/images/pictorial-forest.svg)

_**Repeated symbols** — the isotype approach: each mark is one unit, so the bar is countable as well as measurable. This is the version to reach for by default._

![A pictorial bar chart of spirits consumption drawn by ECharts](https://systergon.com/blog/figma-charts-pictorial-bar/images/pictorial-spirits.svg)

_**Clipped fill** — a single vessel filled to the value. The outline stays constant, which keeps the picture recognisable and the comparison fair, and it reads instantly as “how full”._

![A pictorial bar chart of vehicles drawn by ECharts](https://systergon.com/blog/figma-charts-pictorial-bar/images/pictorial-vehicles.svg)

_**Symbol as the bar** — the mark repeated along the bar’s length. Note that the height stays fixed while the length varies: a one-dimensional encoding, which is exactly what a bar chart is._

![A pictorial bar chart about reindeer velocity drawn by ECharts](https://systergon.com/blog/figma-charts-pictorial-bar/images/pictorial-reindeer.svg)

_**Symbol at the end** — a plain bar with a picture as its cap. The cheapest version of the technique and often the best: full accuracy, plus one image that tells the reader what the chart is about._

![A chart transitioning between pictorial bars and plain bars drawn by ECharts](https://systergon.com/blog/figma-charts-pictorial-bar/images/pictorial-transition.svg)

_**The transition example** — pictorial and plain bars as two states of the same chart, which is the clearest demonstration that these are the same encoding with different marks. If the pictorial version looks different in any way that matters, something has been distorted._

## When to use it, and when not to

**Use it when** the audience is general rather than analytical, the subject is concrete enough to picture, the number of categories is small, and the goal includes being looked at — public communication, editorial graphics, campaign material, a report cover.

Three cases where a plain bar wins:

**1. The values are close together.** Pictorial marks are visually noisy, and small differences that a plain bar shows clearly get lost against the texture of the symbols.

**2. There are many categories.** Twenty rows of repeated icons is a pattern rather than a chart. Above about eight, use rectangles.

**3. The context is analytical.** In a dashboard or a report that people work from, the pictures cost reading speed and add nothing that the axis label does not already say.

A fourth: **when the icon is abstract.** If the symbol needs explaining, it is worse than a rectangle — it occupies the same space and adds a decoding step.

## The isotype tradition, and the rule it established

Pictorial charts have a lineage worth knowing, because it produced the rule this whole page rests on.

In 1920s Vienna, a team led by Otto Neurath developed a picture-based system for communicating social statistics to a public that could not be assumed to read charts — later called **Isotype**. Its central principle was stated plainly: _a greater quantity is shown by more symbols, never by a larger symbol._

The reasoning was perceptual rather than aesthetic. A doubled symbol occupies four times the area, and readers judge the ink rather than the dimension — so scaling misleads systematically while repetition does not. A century of research on graphical perception has done nothing but confirm it.

Two other Isotype conventions transfer directly to modern work. **Symbols were designed as silhouettes**, because detail disappears at the size repetition requires. And **the unit was always stated** — one figure equals so many people — because a countable chart invites counting.

Those three rules — repeat rather than scale, silhouette rather than illustration, state the unit — are the whole craft of this chart type, and they were settled before computers.

## Building one, step by step

Six screens, start to finish, captured from the plugin.

![The Figma Charts gallery filtered to the Pictorial Bar category](https://systergon.com/blog/figma-charts-pictorial-bar/images/step-gallery.webp)

_**1. Filter to Pictorial Bar.** Seven ECharts examples, covering repeated symbols, clipped fills, symbols as bars and symbols as caps._

![The Figma Charts editor with a pictorial bar chart in the preview](https://systergon.com/blog/figma-charts-pictorial-bar/images/step-editor.webp)

_**2. The editor.** Live preview above, tabs below. Check the symbol at final size early: icons that read at 200px frequently become mush at 40px, and the chart is usually sized last._

![The Data tab showing categories and values behind a pictorial bar chart](https://systergon.com/blog/figma-charts-pictorial-bar/images/step-data.webp)

_**3. Categories and values.** The ordinary cartesian table — a label and a number per row, exactly as a bar chart. The pictures are configuration, not data._

![The Configuration tab showing pictorial bar option groups](https://systergon.com/blog/figma-charts-pictorial-bar/images/step-config.webp)

_**4. The symbol and its repeat mode.** This is where the chart is decided: which symbol, whether it repeats, whether it clips, and how it is sized. The repeat setting is the honesty setting._

![The Export tab showing code export formats](https://systergon.com/blog/figma-charts-pictorial-bar/images/step-export.webp)

_**5. Export.** A working component for React, Vue 3, Angular, Svelte or vanilla JavaScript — and the config carries the symbol path, which is the part that will otherwise be redrawn by hand in production._

![The + SVG and + PNG insert buttons](https://systergon.com/blog/figma-charts-pictorial-bar/images/step-insert.webp)

_**6. Insert.** SVG brings every symbol in as a vector shape, so swapping the library’s icon for your own component is a canvas operation — which is how most polished pictorial charts are actually finished._

## The data shape it needs

Exactly a bar chart’s: a label column and one or more numeric columns. The pictures live in the configuration, which has a useful consequence — **any bar chart can become pictorial and back again without touching the data**, which is what the transition example demonstrates.

Pictorial bars have no registry restrictions in the plugin: the ordinary table editor, and a linked data source works. So a campaign chart can be driven from a live sheet while keeping its illustration.

The one thing to decide in the data is **what one symbol represents** when you use repeat mode. One tree per thousand hectares, one person per ten thousand people — and that unit belongs on the chart, because readers count symbols and will otherwise assume one each.

## Library by library

The **Pictorial Bar** category is **ECharts only — seven examples**, and it is a genuine capability difference rather than a filing one: pictorialBar is an ECharts series type with no direct equivalent elsewhere.

- **ECharts — 7 examples**, with symbol repetition, clipping, custom SVG paths as symbols, per-symbol sizing and the plain-to-pictorial transition. If you want this technique configured rather than assembled, this is the only tab.
- **Everyone else — build it.** Two routes: a bar chart whose bars are filled with a repeating pattern, or — more commonly — a plain bar chart inserted as SVG with the rectangles replaced by icon components in Figma. The second is how most published pictorial charts are made, and it gives you exactly the control the library cannot.

That second route is worth taking seriously even when ECharts is available: **the library gets the geometry right, and Figma gets the icon right.** Render the bars, insert as SVG, then swap in your own symbol component at the same dimensions.

As always: **design in whichever library your engineers already use**, because the export then matches production exactly. [Choosing the right chart library](https://systergon.com/blog/figma-charts-choosing-the-right-chart-library) covers the trade-offs.

## Styling it well

**One symbol, one meaning.** Different icons for different categories is a legend the reader has to learn; the same icon in different colours keeps the comparison about length.

**Keep the silhouette simple.** Pictorial marks are repeated at small sizes, so detail disappears and only the outline survives. Test the symbol at the smallest size it will appear.

**Baseline discipline still applies.** This is a bar chart: the axis starts at zero, the bars share a baseline, and the pictures do not change that.

**Partial symbols need a convention.** In repeat mode the last unit is usually fractional. Clipping it is standard and readable; rounding to whole symbols is also fine if you say so; scaling the final one is not, because it reintroduces the size distortion the mode exists to avoid.

**Give the symbols air.** A gap between repeated marks keeps them countable. Touching symbols merge into a textured bar, which is a legitimate look and gives up the counting.

For type and colour, bind them to your design system rather than picking by hand — covered in [Your chart, your design system](https://systergon.com/blog/figma-charts-design-system-colors-typography-tokens).

## Choosing the symbol

The icon is doing two jobs — carrying the value and saying what the chart is about — and most pictorial charts fail on the second before they fail on the first.

**Concrete beats abstract.** A tree, a person, a car, a bottle. Anything that needs a legend to identify has taken the space of a rectangle and added a decoding step.

**The silhouette is the design.** At repeat sizes, interior detail vanishes; what survives is the outline. Test the icon at 16px before committing, because that is roughly what a repeated symbol gets.

**Consistent visual weight across categories.** If one category’s icon is a solid block and another’s is a thin outline, the solid one reads as larger at the same value. Where different icons per category are unavoidable, normalise their ink.

**Watch the connotation.** Human figures for casualties or displacement change how a number lands; that is a genuine rhetorical effect, well documented, and it should be a choice rather than a default.

## The options that control the symbol grid

Once you go past the presets, six settings do nearly all the work in this chart type, and they all appear in the plugin’s own examples.

**`symbolRepeat`** — whether the icon tiles along the bar or is drawn once and scaled. This is the single decision that separates an honest count from a stretched picture.

**`symbolSize`** — takes a pair, width and height, and percentages work: `['80%', '60%']` sizes each repeat relative to the category band rather than in pixels, so the chart survives being resized.

**`symbolMargin`** — the gap between repeats. Too tight and the icons read as one continuous shape; too loose and counting becomes deliberate work.

**`symbolClip`** — whether the last, partial symbol is cut to the exact value or drawn whole. Clipping is more accurate; whole symbols are easier to count. Pick by whether the reader is reading a number or a magnitude.

**`symbolBoundingData`** — pins the repeat grid to a fixed maximum rather than to each bar’s own value, so every row uses the same symbol pitch. Without it, rows can end up with subtly different icon sizes and the comparison quietly breaks.

**`symbolPosition` and `symbolOffset`** — where the symbol sits relative to the bar baseline, which is how the “icon standing on the axis” look is built.

You do not need to type any of these to use the chart — the presets set them — but knowing the names makes the difference between asking for “the icons a bit further apart” and asking for a `symbolMargin` change, which is a five-second edit rather than a conversation.

## Reading it well — and the ways it misleads

**Scaled symbols square the impression.** The central distortion: enlarging a picture in both dimensions makes a doubled value look four times bigger. It is the most common chart-lie in circulation and it happens by default in most drawing tools.

**Icons carry their own weight.** A visually heavy symbol reads as more than a light one at the same length — a solid car against a thin tree. Keep the visual weight consistent across categories.

**Partial symbols invite over-reading.** Half a person is a convention for half a unit; a quarter is beyond what anyone can judge, and readers will still try.

**Pictures imply precision they do not have.** A row of icons looks countable even when the last one has been rounded. State the unit, and say if you rounded.

**And the subject matters.** Repeated human figures for casualties, illness or displacement is a well-known device with a real effect on how the number is received. That is sometimes the intent and it should always be a decision.

## Swapping in your own icon

The most practical way to use this chart type is a hybrid: let the library compute the geometry, then replace its symbol with yours on the canvas.

**Render the structure first.** Build the chart with any symbol — the default is fine — so that the bar lengths, spacing and repeat counts are computed from your data.

**Insert as SVG.** Every symbol arrives as a separate vector shape at the right position and size.

**Swap by selecting all instances.** Because the symbols are identical shapes, selecting one and using Figma’s select-same or a plugin gets you the rest, and replacing them with a component instance keeps every position.

**Then check the smallest bar.** Your icon has different proportions from the placeholder, so the shortest bar is where the substitution breaks first — a partial symbol that no longer reads as the object.

The result is a chart whose lengths came from data and whose marks came from your design system, which is what a published pictorial chart needs and neither tool produces alone.

## Accessibility

**Do not rely on the icon to identify the category.** Text labels do that; the picture is reinforcement.

**Check symbol contrast at final size.** Thin-line icons at small sizes fail contrast in a way solid rectangles do not.

**State the unit in text.** “Each figure = 1,000 people” belongs on the chart, since counting is what the form invites.

**Give it a text equivalent.** The Export tab’s **Copy Alt Text**, **Copy Data Table** and **Set Node Desc** produce a description, a table of the numbers and a description written onto the Figma node — and here the table carries the exact values the rounded symbols do not.

## Common questions

### What is a pictorial bar chart?

A bar chart whose bars are drawn with pictures rather than rectangles — repeated symbols, a clipped fill, or an icon capping a plain bar. The encoding is unchanged; only the mark differs.

### Is it a legitimate chart or decoration?

Legitimate, provided the symbol is repeated or clipped rather than scaled. Repetition keeps it countable and clipping keeps the frame constant; scaling a picture in two dimensions squares the impression and is the classic distortion.

### Which libraries can draw one?

**ECharts only** — seven examples, via its pictorialBar series. Elsewhere, the practical route is a plain bar chart inserted as SVG with the rectangles swapped for icon components in Figma, which is how most published pictorial charts are made anyway.

### Should the symbol repeat or stretch?

Repeat, or clip a fixed outline. Never stretch: a symbol scaled in both dimensions makes a doubled value look four times larger, and one stretched in a single dimension stops looking like the thing it depicts.

### How many categories can it carry?

About eight. Beyond that the repeated marks become a texture and small differences disappear into it — and a plain bar chart handles twenty categories without complaint.

### What does one symbol represent?

Whatever you define, and it must be stated. Readers count symbols, so “each figure = 1,000 people” on the chart is not optional once the unit is anything other than one.

### Can it use live data?

Yes — it takes the ordinary cartesian table and accepts a linked source, so a campaign chart can be illustrated and live at the same time.

### How do I use my own icon?

Render the chart with any symbol so the lengths and repeat counts are computed from your data, insert as SVG, then replace the symbol shapes with your own component instance — the positions are already correct. Check the shortest bar afterwards, since that is where a differently-proportioned icon breaks first.

### Does the chart stay editable in Figma?

Insert as **SVG** and every symbol is a vector shape — which is the main reason to build one here: keep the library’s geometry and swap in your own icon component. Insert as **PNG** for a flat image at twice the pixel density.

## Where to start

Open the plugin, filter to Pictorial Bar, and build the same data twice — once with repeated symbols, once as plain bars. If the pictorial version reads as clearly as the plain one, the pictures are free and you should use them. If anything got harder to compare, the decoration is costing accuracy, and a rectangle with an icon beside the label will give you both.

[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [Browse all 45 chart types →](https://systergon.com/figma-charts/chart-types)