TryMermaid

Mermaid XY Chart Maker

Write XY charts in Mermaid code and watch them render as you type. Start from the example below, then export PNG or SVG, share a link or embed the diagram.

Updated · Code editor with live preview

XY chart example

Rendering preview…

xychart-beta
    title "Monthly recurring revenue"
    x-axis [jan, feb, mar, apr, may, jun]
    y-axis "Revenue (USD)" 0 --> 12000
    bar [3200, 4100, 5300, 6900, 8800, 11200]
    line [3200, 4100, 5300, 6900, 8800, 11200]
Open this example in the editor Start a blank diagram

What is an XY chart?

An XY chart plots values against a horizontal scale as bars, as a line, or as both together. It is the ordinary bar-and-line chart of business reporting, written as text rather than built in a spreadsheet. In Mermaid you write one as a block starting with the xychart-beta keyword.

When to use an XY chart

  • Revenue, signups or usage over time
  • Before-and-after comparisons in a report
  • Benchmark results in technical documentation
  • Any chart that belongs in version control rather than a spreadsheet

How to make an XY chart in Mermaid

  1. Step 1

    Open the editor

    Open TryMermaid with the example on this page, or start a new diagram with xychart-beta on the first line.

  2. Step 2

    Set up the axes

    Add a title, then list the categories on the x-axis line, such as x-axis [jan, feb, mar].

  3. Step 3

    Plot the data

    Add a bar line, a line line, or both, each holding one value per category in the same order.

  4. Step 4

    Export or share

    Check the live preview, then export as PNG or SVG or copy a share link.

XY chart syntax cheat sheet

ElementSyntaxWhat it does
Startxychart-betaBegins an XY chart
Titletitle "Revenue"Heading above the chart
X axisx-axis [jan, feb, mar]Categories along the bottom
Y axisy-axis "Revenue" 0 --> 12000Label and range for the vertical scale
Barsbar [3200, 4100, 5300]One value per category
Lineline [3200, 4100, 5300]Same values drawn as a line

XY chart FAQ

Can a Mermaid XY chart show bars and a line together?

Yes. Give both a bar line and a line line with the same values, as the example on this page does, and Mermaid draws the line over the bars.

How do I control the y-axis range?

Set the range explicitly on the y-axis line, as in y-axis "Revenue (USD)" 0 --> 12000. Without a range Mermaid picks one from the data.

Can I rotate the chart?

Add vertical after the keyword, as in xychart-beta vertical, to turn the chart on its side. The default orientation is horizontal.

Other Mermaid diagram types