Skills › Scientific Agent Skills › markdown-mermaid-writing › xy_chart.md

xy_chart.md

62 lines · skills/markdown-mermaid-writing/references/diagrams/xy_chart.md at 5f2bc03

1

3# XY Chart

5> **Back to [Style Guide](../mermaid_style_guide.md)** — Read the style guide first for emoji, color, and accessibility rules.

7**Syntax keyword:** `xychart-beta`

8**Best for:** Numeric data visualization, trends over time, bar/line comparisons, metric dashboards

9**When NOT to use:** Proportional breakdowns (use [Pie](pie.md)), qualitative comparisons (use [Quadrant](quadrant.md))

11> **Accessibility:** Mermaid 12.0.0 emits `accTitle`/`accDescr` for this type. Keep a visible description and verify older destination renderers.

13---

XY Chart

Back to Style Guide — Read the style guide first for emoji, color, and accessibility rules.

Syntax keyword: xychart-beta Best for: Numeric data visualization, trends over time, bar/line comparisons, metric dashboards When NOT to use: Proportional breakdowns (use Pie), qualitative comparisons (use Quadrant)

Accessibility: Mermaid 12.0.0 emits accTitle/accDescr for this type. Keep a visible description and verify older destination renderers.

Raw lines 1 to 14

15## Exemplar Diagram

17_XY chart comparing illustrative monthly revenue (bars) and operating cost (line), both in thousands of dollars; it does not measure per-customer acquisition cost:_

19```mermaid

20xychart-beta

21 accTitle: Xy Chart Example

22 accDescr: Illustrative xy chart diagram; the surrounding text describes its data and relationships.

23 title "📈 Revenue and Operating Cost"

24 x-axis [Jan, Feb, Mar, Apr, May, Jun]

25 y-axis "Thousands ($)" 0 --> 120

26 bar "Revenue" [20, 35, 48, 62, 78, 95]

27 line "Operating cost" [50, 48, 45, 40, 35, 30]

28```

30---

Exemplar Diagram

XY chart comparing illustrative monthly revenue (bars) and operating cost (line), both in thousands of dollars; it does not measure per-customer acquisition cost:

xychart-beta
    accTitle: Xy Chart Example
    accDescr: Illustrative xy chart diagram; the surrounding text describes its data and relationships.
    title "📈 Revenue and Operating Cost"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Thousands ($)" 0 --> 120
    bar "Revenue" [20, 35, 48, 62, 78, 95]
    line "Operating cost" [50, 48, 45, 40, 35, 30]

Raw lines 15 to 31

32## Tips

34- Combine `bar` and `line` only when units and scale are compatible; preserve a data table and state that example values are illustrative

35- Use **emoji in the title** for visual flair: `"📈 Revenue Growth"`

36- Use quoted `title` and axis labels

37- Define axis range with `min --> max`

38- Keep data points to **6–12** for readability

39- Multiple `bar` or `line` entries add series; bars can overlap rather than group side by side. Named series such as `line "Control" [1, 2]` add a legend in v11.17.0+. Validate appearance on the actual host

40- **Always** pair with a detailed Markdown text description above for screen readers

42---

Tips

Combine bar and line only when units and scale are compatible; preserve a data table and state that example values are illustrative
Use emoji in the title for visual flair: "📈 Revenue Growth"
Use quoted title and axis labels
Define axis range with min --> max
Keep data points to 6–12 for readability
Multiple bar or line entries add series; bars can overlap rather than group side by side. Named series such as line "Control" [1, 2] add a legend in v11.17.0+. Validate appearance on the actual host
Always pair with a detailed Markdown text description above for screen readers

Raw lines 32 to 43

44## Template

46_Description of what the X axis, Y axis, bars, and lines represent and the key insight:_

48```mermaid

49xychart-beta

50 accTitle: Xy Chart Example

51 accDescr: Illustrative xy chart diagram; the surrounding text describes its data and relationships.

52 title "📊 Your Chart Title"

53 x-axis [Label1, Label2, Label3, Label4]

54 y-axis "Unit" 0 --> 100

55 bar "Observed" [25, 50, 75, 60]

56 line "Reference" [30, 45, 70, 55]

57```

Template

Description of what the X axis, Y axis, bars, and lines represent and the key insight:

xychart-beta
    accTitle: Xy Chart Example
    accDescr: Illustrative xy chart diagram; the surrounding text describes its data and relationships.
    title "📊 Your Chart Title"
    x-axis [Label1, Label2, Label3, Label4]
    y-axis "Unit" 0 --> 100
    bar "Observed" [25, 50, 75, 60]
    line "Reference" [30, 45, 70, 55]

Raw lines 44 to 59

60## Verified reference

62Syntax examples reviewed against [official Mermaid documentation](https://mermaid.js.org/syntax/xyChart.html) and rendered with Mermaid 12.0.0 (2026-10-01). Check the destination version; appearance and accessibility are not guaranteed by a successful parse.

Verified reference

Syntax examples reviewed against official Mermaid documentation and rendered with Mermaid 12.0.0 (2026-10-01). Check the destination version; appearance and accessibility are not guaranteed by a successful parse.

Raw lines 60 to 62