An XY chart plots data against two axes — one horizontal (x) and one vertical (y). Mermaid supports bar charts and line charts within the same diagram, and the two can be combined on a single set of axes to compare related data series.

XY charts are a natural fit for showing trends over time: monthly visitors to a blog, weekly sales, seasonal readership patterns, or any data set where progression across a fixed set of categories matters.

This diagram type is experimental and requires Mermaid v10.2 or later.

xychart-beta
    title "Monthly Blog Visitors (2026)"
    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug]
    y-axis "Visitors" 0 --> 6000
    bar [1200, 1850, 2400, 3100, 3900, 4600, 4200, 5100]
    line [1200, 1850, 2400, 3100, 3900, 4600, 4200, 5100]

Displaying both bar and line together makes the individual monthly values easy to read (bars) while the overall upward trend stays visually prominent (line).

```mermaid
xychart-beta
    title "Monthly Blog Visitors (2026)"
    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug]
    y-axis "Visitors" 0 --> 6000
    bar [1200, 1850, 2400, 3100, 3900, 4600, 4200, 5100]
    line [1200, 1850, 2400, 3100, 3900, 4600, 4200, 5100]
```

For more XY chart syntax see the XY chart documentation at mermaid.js.org