# Pie Chart Diagrams

### What are Mermaid Pie Charts?

Mermaid's pie charts visualize proportional data by dividing a circle into slices, where each slice represents a percentage of the whole. For data teams, they're useful for showing distributions, composition breakdowns, and relative proportions in your data.

***

### Creating Your First Pie Chart

1. **Launch DinoAI:** From Code IDE, access [DinoAI](/app-help/documentation/dino-ai.md) to start creating diagrams.
2. **Use a Simple Prompt:** Tell DinoAI what kind of Pie Chart you want to create. For example:

{% code overflow="wrap" %}

```
- "Create a mermaid pie chart showing the distribution of data sources in my warehouse"
"Generate a mermaid pie chart for my data quality metrics with clean vs. problematic records"
"Build a mermaid pie chart showing resource allocation across different data pipeline components"
```

{% 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
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```

<figure><img src="/files/WuB0zMVaIzO5GMKCsWRZ" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

#### Reusable Pie Chart prompts for you and your team

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

***

### Diagram Syntax Guide

#### Basic Structure

```mermaid
pie
    title Chart Title
    "Label 1" : 50
    "Label 2" : 30
    "Label 3" : 20
```

#### Optional Features

* Add `showData` after `pie` to display values
* Title is optional
* Values support up to 2 decimal places

### Data Team Examples

#### Data Quality Metrics

```mermaid
pie title Data Quality Overview
    "Clean Records" : 85.5
    "Missing Values" : 10.25
    "Anomalies" : 4.25
```

#### Resource Allocation

```mermaid
pie showData title CPU Usage by Process
    "ETL Jobs" : 45.5
    "Queries" : 30.2
    "Analytics" : 15.8
    "Other" : 8.5
```

### Configuration Options

#### Label Position

```mermaid
%%{init: {"pie": {"textPosition": 0.5}} }%%
pie
    "A" : 50
    "B" : 50
```

* `textPosition`: 0.0 (center) to 1.0 (edge)
* Default: 0.75

#### Visual Customization

```mermaid
%%{init: {"themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie
    "Group A" : 50
    "Group B" : 50
```

### Best Practices

1. Limit to 6-8 slices for readability
2. Order slices by size (largest first)
3. Use clear, concise labels
4. Consider using `showData` for precise values
5. Use meaningful titles

***

{% hint style="info" %}

### Additional Resources

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.paradime.io/app-help/documentation/integrations/code-ide/mermaid-js/pie-chart-diagrams.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.