What a Mermaid xy chart is for
An XY chart draws bar and line series over a shared x axis. It covers simple bar charts, line charts and combinations without a charting library.
XY Chart syntax
| Syntax | Meaning |
|---|---|
xychart-beta |
Start an XY chart (the keyword includes -beta) |
xychart-beta horizontal |
Horizontal bars |
title "Text" |
Title |
x-axis [a, b, c] |
Categories on the x axis |
x-axis "Label" 0 --> 100 |
Numeric x axis with a range |
y-axis "Label" 0 --> 100 |
y axis label and range |
bar [1, 2, 3] |
Bar series |
line [1, 2, 3] |
Line series |
Basic example
xychart-beta
title "Monthly signups"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
y-axis "Signups" 0 --> 1200
bar [320, 410, 560, 610, 790, 1050]
line [320, 410, 560, 610, 790, 1050]Open this example in the Mermaid editor
Common mistakes
- Each series needs one value per x-axis category.
- Titles and axis labels with spaces need double quotes.
Use it in Markdown
```mermaid
xychart-beta
title "Monthly signups"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
y-axis "Signups" 0 --> 1200
bar [320, 410, 560, 610, 790, 1050]
line [320, 410, 560, 610, 790, 1050]
```GitHub, GitLab, Azure DevOps, Obsidian, Notion and docs generators such as Docusaurus and MkDocs (with a plugin) draw fenced mermaid blocks. Check it locally in the Markdown preview.
Other Mermaid diagrams
- Mermaid flowchart syntax
- Mermaid sequence diagram syntax
- Mermaid class diagram syntax
- Mermaid state diagram syntax
- Mermaid er diagram syntax
- Mermaid gantt chart syntax
- Mermaid pie chart syntax
- Mermaid mindmap syntax
- Mermaid timeline syntax
- Mermaid git graph syntax
- Mermaid user journey syntax
- Mermaid quadrant chart syntax
Sources
Spotted a mistake? Email hello@devtoolsmith.com and we’ll fix it.
Frequently asked questions
How do I start a Mermaid xy chart?
Begin the diagram with the keyword xychart-beta on its own line, then add one statement per line. In Markdown, wrap the whole diagram in a fenced code block with the language mermaid so GitHub, GitLab and most docs sites draw it.
How do I export a Mermaid xy chart as an image?
Paste the diagram into the editor on this page and use SVG or PNG above the preview. SVG stays sharp at any size and can be edited further; PNG is exported at twice the screen resolution for slides and documents. Nothing is uploaded.