MermanDraw
Open Editor

Mermaid exampleXY Chart

Monthly Active Users Chart with Mermaid XY Chart

An XY chart in Mermaid puts a simple bar or line chart inside the same Markdown file as the rest of a report, with no spreadsheet export or screenshot. Product and growth teams use it for metrics that are reviewed monthly and live next to the commentary that explains them.

  • mermaid xychart example
  • bar chart in markdown
  • monthly active users chart
  • line and bar chart mermaid
  • metrics chart
Monthly Active Users Chart with Mermaid XY ChartMonthly active users vs targetJanFebMarAprMayJunJulAugSepOctNovDec50454035302520151050Users (thousands)
Open in editor → 8 linesrenders in GitHub, Notion, Obsidian

Mermaid code

xychart-beta
    title "Monthly active users vs target"
    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
    y-axis "Users (thousands)" 0 --> 50
    %% bar = actual, first line = target, second line = last year
    bar [12, 14, 15, 18, 21, 24, 26, 29, 33, 36, 40, 44]
    line [10, 13, 16, 19, 22, 25, 28, 31, 34, 37, 40, 43]
    line [8, 9, 9, 10, 11, 12, 12, 13, 14, 15, 16, 17]

Paste this into any tool that renders Mermaid, or into the editor to change the theme and export PNG or SVG. Syntax reference: XY Chart guide.

What this diagram shows

The bar series is the actual monthly active user count, the first line series is the target, and the second line is last year's count as a baseline. All three have twelve values matching the twelve x-axis labels. The y-axis line sets the unit label and a fixed range of 0 to 50, so the chart does not rescale when a value changes. Where the bar rises above the line, the team is ahead of target; from July onward in this data they are.

How to adapt it

  • Paste your own twelve numbers into the bar array and your targets into line; both arrays must have the same length as the x-axis list.
  • Change 0 --> 50 to a range that fits your numbers, or delete the range to let Mermaid pick one automatically.
  • Use week labels such as W1, W2, ... on the x-axis for a sprint-level view.
  • Add %%{init: {"xyChart": {"width": 900, "height": 400}}}%% above the chart to control the rendered size.
  • Drop both line series and keep only bar for a plain monthly bar chart.

FAQ

Can I plot two bar series side by side?

Mermaid draws multiple bar series on top of each other rather than grouped. For a comparison use one bar and one line as shown, or two line series.

How do I switch to a horizontal chart?

Write xychart-beta horizontal on the first line. The x-axis categories then run down the left side and bars extend to the right.

Why do the x-axis labels have no quotes?

Single-word labels do not need them. A label with a space, such as a full month name and year, must be quoted: x-axis ["Jan 2026", "Feb 2026"].