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. Open the Code IDE and click Apps and Agents.

2. Select Mermaid. Paradime will automatically start a new Mermaid project.

3. In the terminal that appears, use the arrow keys to select XY Chart.

4. A new xyChart.mmd file will be created in your editor with this starter template:

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]

1. Click the eye icon (👁️) in the top right corner of your Mermaid file to preview the chart.

2. Modify the .mmd file as needed; the preview updates automatically.

---

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.