← All diagram types

Mermaid xychart-beta syntax: bar and line charts with examples

Mermaid xychart-beta syntax with rendered examples: titles, axis labels and ranges, bar and line series, and multiple series on one chart.

xychart-beta draws a two-axis chart: bars, a line, or both, over labelled axes. It is the diagram type for trends and comparisons — monthly revenue, load over time, before-and-after counts.

Everything on this page is rendered by makesPDF's own Mermaid renderer, so a ```mermaid block produces exactly this in the PDF.

Bar series

Start with xychart-beta, add a quoted title, categorical x-axis labels, a y-axis range, and a bar series with one value per category:

mermaid
xychart-beta
  title "Monthly renders"
  x-axis ["Jan", "Feb", "Mar", "Apr"]
  y-axis "Renders" 0 --> 100
  bar [45, 60, 72, 90]
Render this to PDF →How diagram blocks work

Line series

line draws the same values as a connected series — better for showing a shape over time:

mermaid
xychart-beta
  title "Latency by week"
  x-axis ["W1", "W2", "W3", "W4", "W5"]
  y-axis "Median ms" 0 --> 500
  line [420, 380, 390, 310, 260]
Render this to PDF →How diagram blocks work

Mixing bars and lines

A bar and a line series can share one chart. Quote a series to name it — current Mermaid lists named series in an automatic legend, while makesPDF tells them apart by colour alone:

mermaid
xychart-beta
  title "API calls vs errors"
  x-axis ["Q1", "Q2", "Q3", "Q4"]
  y-axis "Calls" 0 --> 400
  bar "Calls" [120, 220, 310, 380]
  line "Errors" [8, 14, 19, 12]
Render this to PDF →How diagram blocks work

Two series over very different ranges read best on separate charts, or normalised — one y-axis governs every series.

Axes

  • x-axis ["A", "B", "C"] — categorical labels, one per data point.
  • x-axis "Time (days)" 0 --> 30 — an axis title plus a range.
  • y-axis "Renders" 0 --> 100 — a titled numeric range.
  • y-axis "Renders" — title only; the range derives from the data.

Pin the y-axis range when comparing charts, so the same value sits at the same height:

mermaid
xychart-beta
  title "Support tickets"
  x-axis ["Mon", "Tue", "Wed", "Thu", "Fri"]
  y-axis "Open" 0 --> 60
  bar [12, 18, 24, 31, 27]
Render this to PDF →How diagram blocks work

Horizontal orientation

Add horizontal after the diagram type to lay the same chart out side to side — categories down the left edge, values growing to the right:

mermaid
xychart-beta horizontal
  title "Tickets by day"
  x-axis ["Mon", "Tue", "Wed", "Thu", "Fri"]
  y-axis "Open" 0 --> 60
  bar [12, 18, 24, 31, 27]
Render this to PDF →How diagram blocks work

horizontal changes nothing else: the same title, axes and series lines apply. makesPDF currently draws every xychart vertically, so the example above renders upright here — see the note below.

Not supported in makesPDF yet: horizontal orientation parses but renders vertically (with a layout warning), a numeric x-axis range does not yet draw a numeric x scale — use categorical labels for the x axis — and named bar/line series draw no legend, so they are told apart by colour only.