Skip to content
MermaidViewer
Log inOpen editor

Charts diagram

Mermaid XY Chart (Bar & Line)

Bar and line charts with categorical or numeric axes.

Try xy chart (bar & line) in the editor Generate with AI

Basic xy chart (bar & line) example

Basic xy chart (bar & line) example diagram
mermaid
xychart
    title "Monthly active users (thousands)"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Users" 0 --> 120
    bar [32, 41, 55, 68, 83, 101]
    line [32, 41, 55, 68, 83, 101]
Open in the live editor

Mermaid XY charts render bar charts, line charts or both on the same axes. They're great for metrics in reports and READMEs: monthly revenue, benchmark results, response times and growth curves.

You define the x-axis categories, the y-axis range and one or more bar or line series, and Mermaid draws a clean, themed chart.

When to use a xy chart (bar & line)

  • Monthly metrics and KPIs
  • Benchmark comparisons
  • Growth and trend charts
  • Release-over-release performance

XY Chart (Bar & Line) syntax reference

SyntaxWhat it does
xychartStart an XY chart (older versions: xychart-beta).
xychart horizontalDraw bars horizontally.
title "Text"Chart title.
x-axis [a, b, c]Categorical x-axis.
x-axis "Label" 0 --> 100Numeric x-axis with a range.
y-axis "Label" 0 --> 500Y-axis label and range.
bar [..] / line [..]Add a bar or line series.

XY Chart (Bar & Line) examples

Benchmark comparison

A horizontal bar chart comparing response times.

Benchmark comparison diagram
mermaid
xychart horizontal
    title "p95 latency (ms)"
    x-axis [v1.0, v1.1, v1.2, v2.0]
    y-axis "ms" 0 --> 400
    bar [340, 280, 210, 120]
Open in the live editor

Tips and best practices

  • Set an explicit y-axis range so charts with different data stay comparable.
  • Combine bar and line series to show a value and its trend or target.
  • Quote titles and axis labels that contain spaces.

Generate a xy chart (bar & line) with AI

Not sure where to start? Describe what you need and the AI xy chart (bar & line) generator writes the Mermaid code for you. Try prompts like:

  • “Quarterly revenue vs target for 2026”
  • “Average page load time per release”
  • “Daily steps over a week”

XY Chart (Bar & Line) templates

Monthly Revenue Bar Chart

Bar and line chart showing monthly recurring revenue against a target line.

XY Chart (Bar & Line) FAQ

Can Mermaid make bar charts?

Yes. Use the xychart diagram with a bar series. You can add line series on the same chart and switch to horizontal bars with xychart horizontal.

Is it xychart or xychart-beta?

Newer Mermaid versions accept xychart; older ones require xychart-beta. Both work in MermaidViewer.