# 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](https://docs.paradime.io/app-help/documentation/dino-ai) to start creating diagrams.
2. **Use a Simple Prompt:** Tell DinoAI what kind of XY Chart you want to create. For example:

{% code overflow="wrap" %}

```
- "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"
```

{% endcode %}

3. **Get Your Diagram:** DinoAI will generate a complete `.mmd` file with proper Mermaid syntax.
4. **Preview Your Work:** Click the eye icon (👁️) to preview your diagram in real-time as you edit.
5. **Iterate and Refine:** Modify the generated `.mmd` file directly, or ask DinoAI to make specific changes.

#### Example: 

```mermaid
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]
```

{% hint style="info" %}

#### Reusable XY Charts prompts for you and your team

You can create custom, standardized [.dinoprompts](https://docs.paradime.io/app-help/documentation/dino-ai/dino-prompts) for Mermaid's XY Charts that ensure consistency across your data team. See [step-by-step guide.](https://docs.paradime.io/app-help/documentation/integrations/code-ide/mermaid-js/..#creating-mermaid-diagrams-with-.dinoprompts)
{% endhint %}

***

### Syntax Guide

#### Title

The chart title is added using the `title` keyword:

```mermaid
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:

```mermaid
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:

```mermaid
xychart-beta horizontal
    ...
```

#### Configuration Options

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

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

#### Theming

Adjust chart colors and styles using `themeVariables`:

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

***

### Practical Example: Monthly Sales Revenue

```mermaid
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.

***

{% hint style="info" %}

### Additional Resources

For more syntax options and advanced features, visit the [official Mermaid documentation](https://mermaid.js.org/syntax/xyChart.html).
{% endhint %}