← All diagram types
MERMAID BAR CHART GUIDE

Mermaid Bar Chart Syntax & Examples

Use the xychart syntax to compare categories with Mermaid bars. The example below includes labeled categories, a numeric y-axis, and a copyable bar data array.

Open the Bar Chart editor See the syntax

MERMAID EXAMPLE

Mermaid bar chart example

Copy the working code, replace the labels and values, then continue editing the same diagram in Mermaid Studio.

Compare feature usage

Summarize category metrics

Present a small set of business or engineering values

Mermaid bar chart example rendered Mermaid preview. Source code: xychart title "Monthly signups" x-axis [1Month, 2Month, 3Month, 4Month] y-axis "Signups" 0 --> 100 bar [20, 35, 58, 82]
xychart
  title "Monthly signups"
  x-axis [1Month, 2Month, 3Month, 4Month]
  y-axis "Signups" 0 --> 100
  bar [20, 35, 58, 82]

SYNTAX

Mermaid bar chart syntax

Learn the small set of Mermaid keywords that make this chart work.

SyntaxWhat it does
xychartStarts an XY chart. Add horizontal after the header for a horizontal orientation.
titleAdds a short description above the chart.
x-axisDefines category labels and their order.
y-axisDefines the numeric range and optional axis title.
bar [values]Draws one bar for each numeric value.

The current Mermaid documentation uses xychart and xychart horizontal. xychart-beta is retained by Mermaid Studio as a legacy input alias.

CODE EXAMPLES

More Bar Chart examples

Horizontal Mermaid bar chart

Use the horizontal orientation when category labels are long or numerous.

xychart horizontal
  title "Feature adoption"
  x-axis "Users" 0 --> 100
  y-axis ["Editor", "Templates", "Sharing", "AI"]
  bar [82, 64, 48, 35]
Mermaid bar chart with data labels

Show each value inside or outside its bar with the XY Chart configuration.

---
config:
  xyChart:
    showDataLabel: true
    showDataLabelOutsideBar: true
---
xychart
  title "Books by genre"
  x-axis [Comedy, Romance, Mystery, Crime]
  y-axis "Books" 0 --> 30
  bar [12, 8, 20, 25]
Mermaid bar and line chart

Combine bars and a line when the comparison needs both totals and a trend.

xychart
  title "Monthly signups and target"
  x-axis [Jan, Feb, Mar, Apr]
  y-axis "Signups" 0 --> 100
  bar [20, 35, 58, 82]
  line [25, 40, 55, 70]

TROUBLESHOOTING

Common Bar Chart errors

The chart does not render
Use xychart for new examples and keep xychart-beta only for legacy compatibility. Check the Mermaid version used by the renderer.
Categories and values do not line up
The x-axis category count must match the number of values in each bar or line series.
The comparison looks exaggerated
Start the numeric bar axis at zero unless there is a documented reason to use another baseline.

FAQ

Frequently asked questions

What is a bar chart best for?+

Bar charts are best for comparing separate categories where the difference between values should be immediately visible.

Should a bar chart axis start at zero?+

Usually yes, especially when bar length is used to compare magnitude directly.

How do I make a bar chart in Mermaid?+

Start with xychart, add an x-axis for categories, a y-axis for the numeric range, and a bar array with one value per category.

Does Mermaid support horizontal bar charts?+

Yes. Use xychart horizontal and keep the same bar data syntax.

How do I show values on Mermaid bars?+

Use the xyChart configuration with showDataLabel: true. This option is available in Mermaid v11.14.0 and later.

RELATED GUIDES

Keep exploring Mermaid charts

Mermaid XY Chart guide

Read the guide

Mermaid Line Chart guide

Read the guide

Monthly revenue bar template

Read the guide

TEMPLATES

Start from a related template

Monthly revenue bar chart

Compare monthly revenue with a clear category chart.

Open template

Ready to make a Bar Chart?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio