XY Chart

What is an XY Chart?

Mermaid's An XY chart is a versatile data visualization tool used to represent data with two variables on x-axis and y-axis. It currently supports two main chart types:

• Bar Chart: Displays data as rectangular bars.

• Line Chart: Connects data points with a line.

The framework is flexible and expandable, allowing for the addition of new chart types in the future.

---

Creating Your First XY Chart

Steps:

1. Launch DinoAI: From Code IDE, access DinoAI to start creating diagrams.

2. Use a Simple Prompt: Tell DinoAI what kind of XY Chart you want to create. For example:

- "Create an Mermaid XY chart showing data pipeline performance trends over time"

- "Generate an Mermaid XY chart for data quality metrics with monthly comparisons"

- "Build an Mermaid XY chart showing data volume growth across different sources"

1. Get Your Diagram: DinoAI will generate a complete .mmd file with proper Mermaid syntax.

2. Preview Your Work: Click the eye icon (👁️) to preview your diagram in real-time as you edit.

3. Iterate and Refine: Modify the generated .mmd file directly, or ask DinoAI to make specific changes.

Example:

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

Reusable XY Charts prompts for you and your team

You can create custom, standardized .dinoprompts for Mermaid's XY Charts that ensure consistency across your data team. See step-by-step guide.

---

Syntax Guide

Title

The chart title is added using the title keyword:

xychart-beta
    title "Chart Title"

X-Axis

The x-axis can represent categories or a numerical range:

• Categorical: [cat1, cat2, ...]

• Numerical: "title" min --> max

Y-Axis

The y-axis represents numerical values only:

• "title" min --> max

Chart Types

• Bar Chart: Use bar [data values].

• Line Chart: Use line [data values].

Example:

xychart-beta
    title "Example Chart"
    x-axis ["Q1", "Q2", "Q3", "Q4"]
    y-axis "Values" 0 --> 100
    bar [20, 40, 60, 80]
    line [10, 30, 50, 70]

---

Advanced Features

Orientation

Change the chart orientation to horizontal:

xychart-beta horizontal
    ...

Configuration Options

Customize your chart using parameters like width, height, or axis labels:

---
config:
    xyChart:
        width: 800
        height: 500
---
xychart-beta
    ...

Theming

Adjust chart colors and styles using themeVariables:

---
config:
    themeVariables:
        xyChart:
            titleColor: "#FF0000"
---
xychart-beta
    ...

---

Practical Example: Monthly Sales Revenue

xychart-beta
    title "Monthly Sales Revenue"
    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
    y-axis "Revenue ($)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5200, 5800, 7300, 8000, 9400, 10200, 10800, 10000, 9000, 8400, 6900, 5800]

---

Best Practices

1. Use descriptive titles for clarity.

2. Ensure axis ranges accommodate your data.

3. Choose appropriate chart types for data representation.

4. Use themes to make charts visually appealing.

---

Additional Resources

For more syntax options and advanced features, visit the official Mermaid documentation.