XY chart
XY charts plot bar and line series against a shared axis — the one Mermaid diagram type that’s a data chart rather than a graph of nodes and edges. zombie-mermaid renders both bar and line series, mixed on one chart if needed.
Source → render
Two series, one shared axis.
chart.mmd
xychart-beta
title "Monthly Revenue"
x-axis "Month" [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
y-axis "Revenue (USD)" 0 --> 10000
bar [4200, 5000, 5800, 6200, 5500, 7000, 7800, 7200, 8400, 8100, 9000, 9200]
line [4200, 5000, 5800, 6200, 5500, 7000, 7800, 7200, 8400, 8100, 9000, 9200]About this notation
Where XY charts come from, and how the syntax works.
XY charts plot data across two numeric axes — the one Mermaid diagram type that’s a data chart rather than a graph of nodes and edges, useful for a quick bar or line chart living alongside process diagrams in the same document. Mermaid’s syntax sets the chart’s orientation (vertical by default, or horizontal), titles and ranges for each axis, and any number of named `line` or `bar` series drawn from a plain array of numbers — mixed on the same chart if needed, with named series appearing automatically in a legend.
Read the full syntax reference in the Mermaid docs →Every example
Every XY chart example, on its own page.
XY: Simple Bar Chart
XY: Line Chart
XY: Bar and Line Overlay
XY: Horizontal Bars
XY: Multiple Bar Series
XY: Dual Lines
Show 4 more examples
Keep exploring