Mermaid bar charts
A Mermaid bar chart is built with the `xychart-beta` syntax: you declare an x-axis of categories, a y-axis range, and a `bar` row of values, and the renderer draws the columns. It's the quickest way to drop a trend or frequency chart into a README without an external charting library.
Monthly revenue as bars with a trend line over the same series.
Bar charts in Mermaid are deliberately focused — categories, values, and an optional overlaid `line` for the same series. For 'show how this changed over the months' or 'compare these counts at a glance', that's exactly enough, and it stays in version control as plain text.
When to use a bar chart
- Revenue, signups, or usage trends over time
- Frequency and count comparisons across categories
- Survey and benchmark result summaries
- Quick metric snapshots in reports and READMEs
The Mermaid code
Copy it anywhere Mermaid renders — or see the full syntax reference.
xychart-beta
title "Monthly revenue 2026"
x-axis [jan, feb, mar, apr, may, jun]
y-axis "Revenue (k$)" 0 --> 12
bar [5, 6, 7.5, 8.2, 9.5, 10.5]
line [5, 6, 7.5, 8.2, 9.5, 10.5]Frequently asked questions
- How do I create a bar chart in Mermaid?
- Start with `xychart-beta`, then add an `x-axis [a, b, c]` of category labels, a `y-axis "Label" min --> max` range, and a `bar [1, 2, 3]` row whose values line up with the x-axis. An optional `line [...]` row overlays a trend on the same data. The chart renders horizontally by default; add `horizontal` after `xychart-beta` to rotate it.
- What's the difference between a Mermaid bar chart and a pie chart?
- A bar chart (`xychart-beta`) compares values across categories or over time on a measured axis — best for trends and counts. A pie chart (`pie`) shows parts of a single whole as percentages. Reach for bars when the magnitude and ordering matter, and a pie when the split of one total is the point.
- Can AI generate a bar chart from my data?
- Yes. Describe the series to MermaidCreator's AI — for example 'monthly active users for the first half of the year' — or paste your numbers, and it drafts the `xychart-beta` axes and bar values as editable Mermaid.