Markdown XY chart maker

Draw a bar or line chart from your data. Mermaid XY charts plot values against a simple axis, right inside your Markdown.

Mermaid XY chart syntax

An XY chart plots one or more series against a shared axis as bars or lines. You set the axes then add a bar or line series of numbers. Here is each piece you can write.

Bar chart

Set the x axis categories and a y axis range, then add a bar series.

You write

xychart-beta
  title "Monthly sales"
  x-axis [Jan, Feb, Mar, Apr, May]
  y-axis "Revenue" 0 --> 100
  bar [30, 45, 60, 50, 80]

You get

Line chart

Add a line series in place of, or alongside, the bars.

You write

xychart-beta
  title "Monthly sales"
  x-axis [Jan, Feb, Mar, Apr, May]
  y-axis "Revenue" 0 --> 100
  bar [30, 45, 60, 50, 80]
  line [30, 45, 60, 50, 80]

You get

Cheat sheet

Write this	You get
`xychart-beta`	Start an XY chart
`title "Text"`	Chart title
`x-axis [a, b, c]`	Category labels along the x axis
`y-axis "Text" 0 --> 100`	Label and range for the y axis
`bar [1, 2, 3]`	A bar series
`line [1, 2, 3]`	A line series