# Mermaid XY-Diagramm-Spickzettel

Ein Liniendiagramm oder ein Balkendiagramm auf zwei Achsen.

## Eine Linie

Die x-Achse listet die Positionen, und die Daten sind eine Zahl pro Position.

```mermaid
xychart
    x-axis [jan, feb, mar, apr]
    y-axis "Revenue" 0 --> 100
    line [10, 40, 60, 90]
```

![Ein Liniendiagramm mit vier Punkten, jan bis apr, von 10 auf 90 steigend.](/diagrams/xychart/line.svg)

## Balken

bar zeichnet dieselben Daten als Balken statt als Linie.

```mermaid
xychart
    x-axis [jan, feb, mar, apr]
    y-axis "Revenue" 0 --> 100
    bar [10, 40, 60, 90]
```

![Ein Balkendiagramm mit vier Balken, jan bis apr, von 10 auf 90 steigend.](/diagrams/xychart/bar.svg)

## Zwei Serien und ein Titel

Eine Linie und ein Balken können dasselbe Diagramm teilen, und der Titel steht in seiner eigenen Zeile.

```mermaid
xychart
    title "Sales revenue"
    x-axis [jan, feb, mar, apr]
    y-axis "Revenue (in $)" 4000 --> 11000
    line [5000, 6000, 7500, 8200]
    bar [4000, 5500, 7000, 8100]
```

![Ein Diagramm mit dem Titel „Sales revenue“ mit einer Linie und einem Balken über vier Monate, beide steigend, auf einer y-Achse von 4000 bis 11000.](/diagrams/xychart/title.svg)

## Die x-Achse benennen

Eine Beschriftung vor der Liste benennt die Achse.

```mermaid
xychart
    x-axis "Month" [jan, feb, mar, apr]
    y-axis "Revenue" 0 --> 100
    line [10, 40, 60, 90]
```

![Ein Liniendiagramm mit der x-Achse „Month“ über jan bis apr und einer y-Achse „Revenue“ von 0 bis 100.](/diagrams/xychart/axis-labels.svg)

## In Mernyx zeichnen

Öffne eine .mmd-Datei, verschiebe einen Knoten auf dem Canvas, und der Quellcode kommt mit. Nativ auf macOS, ohne Browser dazwischen.