# How to Make a Combo Chart in Figma (and the One Rule for the Second Axis)
_August 26, 2026 · 12 min read · by Systergon_
> A combo chart puts bars and a line in one frame because two measures can share an x axis while playing completely different roles — a quantity and a rate, an actual and a target. It is also the chart most often used to smuggle in a second axis, and a second axis can make any two series look related. The pairings that work, the rule that keeps the second axis honest, the Pareto chart as the model combo, and why four of the five libraries have no Combo category yet all but one can draw one.
Tags: Figma, Charts, Combo Chart, Dashboards, Plugin
URL: https://systergon.com/blog/figma-charts-combo-chart
---
[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [See the combo gallery →](https://systergon.com/figma-charts/chart-types/combo)

A combo chart puts two different kinds of mark in one frame — bars and a line, most often — and it exists because two measures can share an x axis while playing completely different roles. Volume as bars, price as a line. Actuals as bars, target as a line. Counts as bars, a rate as a line. The mark type is doing the explaining: **this is a quantity, and that is a trend**.

![A combo chart with bars and a line drawn by Google Charts inside the Figma Charts plugin](https://systergon.com/blog/figma-charts-combo-chart/images/combo-basic.svg)

_Real plugin output: a Google Charts combo captured from the editor. Every chart on this page is the library’s own drawing._

It is also the chart most often used to smuggle a second axis into a design, and a second axis can make any two series look related. So this page has a strict shape: what a combo legitimately does, the one rule for the second axis, and how to build one in the libraries that do not have a Combo category at all — which is four of the five.

## 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 chart on your canvas is the library’s own composition of series types.

[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 **Combo** from the category filter — where you will find **five examples, all Google Charts**. That is a filing fact rather than a capability fact, and the [library section](#libraries) is where it gets interesting.

## Two marks, two roles

A combo chart works when the two series are doing different jobs. Three pairings account for nearly every good one:

- **Quantity and rate.** Orders as bars, conversion rate as a line. The bars are counts you can sum; the rate is a ratio you cannot. Drawing both as bars would invite the reader to add up percentages.
- **Actual and reference.** Monthly revenue as bars, target or last year as a line. The line is a benchmark, and the mark type says so — nobody tries to sum a benchmark.
- **Component and total.** Stacked bars for the parts, a line for the whole or for a derived measure such as a moving average.

The common thread: the line is the series you would never draw as a bar, because it is not a quantity that accumulates. When both series are quantities of the same kind, you do not want a combo — you want grouped [bars](https://systergon.com/blog/figma-charts-bar-chart), which compare like with like on one scale.

## Four combos, and what each pairing is for

![Bars with a trend line drawn by Google Charts](https://systergon.com/blog/figma-charts-combo-chart/images/combo-trend-line.svg)

_**Bars with a trend line** — the line here is derived from the bars rather than being a second measure. Google computes it, which makes this the cheapest honest way to separate signal from month-to-month noise._

![Stacked bars with a line drawn by Google Charts](https://systergon.com/blog/figma-charts-combo-chart/images/combo-stacked-line.svg)

_**Stacked bars with a line** — components below, a total or a rate above. Note the reading hazard this creates: only the bottom segment of the stack shares a baseline, so the line is the only series in the chart whose values can be read precisely at every point._

![A line and area combination drawn by Google Charts](https://systergon.com/blog/figma-charts-combo-chart/images/combo-line-area.svg)

_**Line and area** — the fill carries a range or a cumulative quantity while the line carries the headline series. This is the pairing to use when you want context behind a metric rather than a second metric beside it._

![A multi-type combo chart drawn by Google Charts](https://systergon.com/blog/figma-charts-combo-chart/images/combo-multi-type.svg)

_**Three mark types at once** — and the point at which a combo chart starts costing more than it earns. Every additional mark type is another convention the reader has to hold, and the third one rarely pays for itself._

## The one rule for a second axis

Most combo charts need a second y axis, because a count and a percentage do not share a scale. That is legitimate — and it comes with a hazard that no other chart type has quite so sharply: **with two independent axes, you choose where the series cross**. Scale one axis differently and two series that appeared to move together now appear to diverge. Nothing in the chart tells the reader that the crossing points are an artefact of two scaling decisions.

The rule that keeps it honest: **a second axis is for a second unit, never for a second range.**

If your two series are both revenue — one large, one small — a second axis is a way of making the small one look as big as the large one, and the fix is either one axis (accepting that the small series is small) or two charts. If one series is pounds and the other is a percentage, they genuinely cannot share a scale and the second axis is doing real work.

Two supporting habits. **Colour the axis labels to match their series**, so a reader can tell at a glance which scale belongs to which line. And **state both units in the axis titles** — a bare number on each side is where dual-axis charts start misleading people who are skimming.

## When a combo is the wrong chart

**1. Both series are the same kind of quantity.** Then the comparison is like-for-like and grouped bars or two lines do it without asking the reader to decode two mark types.

**2. The relationship is the actual subject.** If the question is “do these two move together?”, a combo chart answers it with a visual coincidence that you controlled. A [scatter plot](https://systergon.com/blog/figma-charts-scatter-plot) of one against the other answers it with evidence.

**3. There are more than two series.** Two mark types and two axes is already a lot of convention. A third series — especially a third mark type — turns the chart into a puzzle, and the usual honest replacement is two stacked charts sharing an x axis.

A fourth, which is really about audience: **when the chart will be read in three seconds.** Combos reward study. On a wall display or a summary slide, one measure drawn well beats two measures drawn together.

## The Pareto chart, which is a combo with a job

One combo is common enough to have its own name and its own category in the plugin: the **Pareto chart** — bars sorted descending, with a cumulative percentage line climbing across them, and a reference at 80%. It answers “how few causes account for most of the effect?”, which is a question a plain bar chart cannot answer without the reader doing running arithmetic.

It is worth studying as the model combo, because every part of it earns its place. The bars are counts, so they are bars. The line is a cumulative percentage, so it is a line and it belongs on a second axis running 0–100% — a genuine second unit, not a rescaled second range. The sort order is mandatory rather than stylistic: an unsorted Pareto produces a wandering cumulative line that means nothing. And the 80% gridline turns the chart into a decision aid: everything left of where the line crosses it is the short list.

Highcharts files it as its own type in the plugin, built from a _pareto_ series plus a _column_ series — which is to say, a combo. If you are designing a defect analysis, a support-ticket breakdown or a cost review, this is the shape to reach for rather than assembling one from scratch.

## Actual versus target, and the alternatives

The other everyday combo is actuals as bars against a target as a line, and it is worth knowing when a different chart does it better, because this pairing has good competition.

**A line target works when the target moves.** Monthly quotas that change, a rolling baseline, last year’s values as a shape — these are genuinely a series, and drawing them as a line lets the reader see both the target’s trajectory and the gap.

**A flat line target is a threshold, and a threshold is better drawn as a rule.** If the target is the same number every period, a single horizontal reference line with a label costs one option and does not add a series to the legend. Most libraries have plot lines for exactly this; a full second series is more machinery than the job needs.

**When there is one measure and one target, use a bullet chart.** A [bullet chart](https://systergon.com/figma-charts/chart-types/bullet) shows a value, a target marker and qualitative bands in a fraction of the space, and it stacks cleanly for several metrics. A combo is the right answer when there are many periods; a bullet is the right answer when there are many metrics.

## Building one, step by step

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

![The Figma Charts gallery filtered to the Combo category](https://systergon.com/blog/figma-charts-combo-chart/images/step-gallery.webp)

_**1. Filter to Combo.** Google Charts is the only library with the category — five examples covering the useful pairings._

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

_**2. The editor.** Live preview above, tabs below. With a combo, check the legend first: it is the only thing telling the reader which series is which mark type._

![The Data tab showing a label column and two value columns for a combo chart](https://systergon.com/blog/figma-charts-combo-chart/images/step-data.webp)

_**3. One column per series.** The data shape is the ordinary cartesian table — a label column and a numeric column per series. Which series becomes a line rather than a bar is a configuration decision, not a data one._

![The Configuration tab showing combo option groups including series type overrides](https://systergon.com/blog/figma-charts-combo-chart/images/step-config.webp)

_**4. Assign the mark types.** This is the panel that makes it a combo: each series gets a type, and any series can be moved to the second axis. Set the axis titles here too, with units._

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

_**5. Export.** A working component for React, Vue 3, Angular, Svelte or vanilla JavaScript — the per-series type overrides travel in the config, which is exactly the part a hand rebuild tends to lose._

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

_**6. Insert.** SVG keeps the bars as rectangles and the line as a path, so the two series can be restyled independently on the canvas._

## The data shape it needs

The ordinary **cartesian** table: one label column, then one numeric column per series. Nothing about the data says “this one is a line” — that is a per-series setting in the configuration, which is why any multi-series chart can become a combo without touching the data.

Combo charts accept a linked data source, so a Sheet with a date column and two measures drives one directly — see [live data from Google Sheets and APIs](https://systergon.com/blog/figma-charts-live-data-from-google-sheets-and-apis). One caution specific to this type: because the series usually have very different magnitudes, **an unparseable cell becoming 0** is easy to miss in the small-magnitude series — a rate line dropping to the axis for one period reads as a genuine collapse.

## Library by library — and the four hidden ones

The **Combo** category holds **five examples, all Google Charts**. Taken at face value that reads as “only Google Charts can mix bars and lines”, and that is false — it is one of the clearest chip-versus-capability cases in the whole plugin.

**Highcharts** mixes series types freely, and the gallery proves it in charts filed under other categories: its multi-axis line example is a _spline plus column_, its Pareto chart is a _pareto line plus column_, its error-bar chart is a _column plus errorbar_, and its bell-curve histogram combines three types in one frame. **ApexCharts** does the same: its “Line & Column Mix”, “Line & Area Mix” and “Multiple Y-Axis” examples are all combos, filed under Line. **ECharts** mixes types as a matter of course. **Nivo** is the genuine constraint of the five: its charts are separate React components, so combining a bar and a line means composing two of them yourself.

- **Google Charts — 5 examples**, and the only library where “combo” is a chart type you pick rather than a configuration you assemble. It also computes trend lines, which is why its trend-line combo is the shortest path to that chart.
- **Highcharts** — per-series `type` overrides plus multiple axes; the most control, commercial licence to ship commercially.
- **ApexCharts** — mixed types with the cleanest defaults, and the second library the Inspector works with.
- **ECharts** — per-series types with the deepest option set, and the best behaviour when one of the series is very dense.
- **Nivo** — the one to avoid for this: composition happens in React, not in configuration. And it exports to React only.

So the honest sentence is “Google Charts is the only library with a Combo _category_”. Four of the five will draw you a combo; in three of them you build it by setting a type on a series.

## Styling it well

**Bars behind, line in front.** The line is the series being read for shape, and a line hidden behind a bar is a line the reader will lose. Every library draws series in order; put the line last.

**Give the line a different hue family, not a different shade.** The mark types are already doing the separating; a genuinely distinct colour lets the legend and the axis labels agree with each other at a glance.

**Keep the bars quieter than you would alone.** A full-strength bar series plus a full-strength line competes for the same attention. Muting the bars slightly is usually right, because they are the context and the line is the argument — if it is the other way round, mute the line instead, but pick one.

**Markers on the line, if the periods matter.** With a bar per period, the line’s vertices should sit above the bar centres; markers make that alignment visible and reassure the reader the two series are on the same x positions.

**One gridline set, tied to the primary axis.** Two sets of gridlines from two axes is the fastest way to make a combo unreadable. Draw the primary axis gridlines and let the secondary axis carry ticks and labels only.

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).

## Reading it well — and the ways it misleads

**The crossing point is a choice, not a fact.** With two independent axes, where the line crosses the bars is determined by the two ranges you set. Readers treat crossings as events. If your chart has a memorable crossing, check whether it survives a different but equally reasonable pair of ranges.

**Two axes invite two conclusions.** The same chart can be made to show “costs are rising faster than revenue” or “revenue is comfortably ahead of costs” by rescaling one side. If the relationship between the two series is genuinely the point, index both to 100 at a common start and use one axis — that comparison is honest and needs no second scale.

**Stacked bars plus a line hides which values are readable.** In that combination only the bottom stack segment and the line have fixed baselines. It is a common and useful chart; just do not expect readers to compare middle segments across periods.

**A trend line is a model.** Where the line is computed rather than measured — a moving average, a fitted trend — say so in the legend. Otherwise readers count it as a second observation of reality.

**Mark type implies aggregation.** Bars read as things that sum; lines read as things that continue. Drawing a rate as bars invites addition, and drawing a count as a line invites interpolation between periods that were counted discretely.

## Accessibility

**The mark types are an accessibility win — use them as one.** A bar and a line are distinguishable without colour, which is more than most multi-series charts can say. Keep that property by not adding a second bar series in a different hue.

**Label the axes with units, and match label colour to series.** For a reader who cannot rely on hue, the units are the fallback that identifies which axis belongs to which series.

**Direct labels beat a legend.** A short label at the end of the line and a value on the final bar removes the lookup entirely.

**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. For a combo, make sure the table carries both units — that is the information the dual axis was compressing.

## Common questions

### When should I use a combo chart?

When two series share an x axis but play different roles — a quantity and a rate, an actual and a target, components and a total. If both series are the same kind of quantity, grouped bars or two lines communicate better.

### Is a second y axis acceptable?

For a second _unit_, yes. For a second _range_ of the same unit, no — that is using the axis to make a small series look large. When the relationship between two same-unit series is the point, index both to 100 at a common start and keep one axis.

### Which libraries can draw a combo chart?

Four of the five. Google Charts has the only Combo _category_ (5 examples); Highcharts, ApexCharts and ECharts all support per-series type overrides and ship mixed-type examples filed under other categories. Nivo is the exception — its charts are separate components, so you compose them in React.

### Which series should be the line?

The one you would never draw as a bar: the rate, the target, the moving average, the index. Bars imply a quantity that accumulates; lines imply a value that continues.

### Can I have three or more mark types?

You can, and the plugin ships an example. Each additional mark type is another convention for the reader to hold, and the third rarely earns it. Two stacked charts sharing an x axis usually communicates better.

### How do I stop the bars hiding the line?

Series draw order: put the line last so it renders in front, and mute the bars slightly so the line reads as the foreground. Markers on the line vertices help confirm the alignment with the bar centres.

### Can a combo chart use live data?

Yes — it takes the ordinary cartesian shape, so a linked Sheet or API drives it like any bar or line chart. Watch for unparseable cells becoming zero: on the small-magnitude series, one zero reads as a genuine collapse.

### Does the chart stay editable in Figma?

Insert as **SVG** and the bars arrive as rectangles and the line as a path, so the two series can be restyled independently — useful when the line needs to become an annotation. Insert as **PNG** for a flat image at twice the pixel density.

## Where to start

Open the plugin, filter to Combo, and put your two series in — then ask the only question that matters: are these two different _kinds_ of number? If one is a count and the other is a rate, you have a combo chart and the second axis is honest work. If they are both counts, close the second axis and draw them on one scale, even if the smaller one turns out to be small.

[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)