XY Chart

Master creating XY charts in Mermaid for representing bar and line graphs with custom axes, themes, and orientations for data analysis.

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:

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:

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:

---

Advanced Features

Orientation

Change the chart orientation to horizontal:

Configuration Options

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

Theming

Adjust chart colors and styles using themeVariables:

---

Practical Example: Monthly Sales Revenue

---

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.