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]
XY chart diagram, zombie-mermaid Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 0 2000 4000 6000 8000 10000 Month Revenue (USD) Monthly Revenue Bar 1 Line 1
More examples

More real-world examples.

Keep exploring

Explore the other diagram types.

Pick a look

Live in every built-in theme.