Quadrant Charts

What are Quadrant Charts?

Mermaid's Quadrant charts are a visual tool used to plot data points across two dimensions, divided into four quadrants. They help in analyzing data patterns and trends, and are widely used in business, marketing, and strategic decision-making. Each quadrant represents a distinct area of analysis, often defined by specific criteria relevant to the dataset.

Creating Your First Quadrant Chart

From the Code IDE, click Apps and Agents from the left-hand panel.
Select Mermaid. Paradime will automatically start a new Mermaid project.
In the terminal that appears, use the arrow keys to select "Quadrant Chart."
A new quadrantChart.mmd file will be created in your editor with this starter template:

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

Click the eye icon (👁️) in the top right corner of your Mermaid file to preview the diagram.
Edit and update your .mmd file as needed—the preview will update automatically.

Diagram Syntax Guide

Basic Syntax

Title: Describes the chart and appears at the top.
```
quadrantChart
    title Campaign Analysis
```

Axes: Label the x-axis and y-axis using descriptive text.

x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement

Quadrants: Assign text to each quadrant for categorization.

quadrant-1 Expand
quadrant-2 Promote
quadrant-3 Reassess
quadrant-4 Improve

Points: Plot data points with values between 0 and 1 for both x and y.
```
Campaign A: [0.3, 0.6]
Campaign B: [0.5, 0.4]
```

Customizations

Add color, size, and styling to points:

Campaign A: [0.9, 0.0] radius: 12
Campaign B: [0.8, 0.1] color: #ff3300

Use classes for consistent styling:

Campaign A:::class1: [0.9, 0.0]
classDef class1 color: #109060

Data Team Examples

Marketing Campaign Analysis

quadrantChart
    title Campaign Performance
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 Expand
    quadrant-2 Promote
    quadrant-3 Reassess
    quadrant-4 Improve
    Campaign A: [0.2, 0.8]
    Campaign B: [0.5, 0.5]
    Campaign C: [0.8, 0.3]

Task Prioritization

quadrantChart
    title Task Urgency and Importance
    x-axis Urgent --> Not Urgent
    y-axis Not Important --> Important
    quadrant-1 Act Immediately
    quadrant-2 Plan
    quadrant-3 Delegate
    quadrant-4 Eliminate
    Task A: [0.8, 0.9]
    Task B: [0.3, 0.4]
    Task C: [0.5, 0.2]

Best Practices

Use descriptive labels for quadrants and axes.
Plot only relevant data points to maintain clarity.
Add color coding or size variation for additional dimensions.
Keep quadrants evenly spaced and clearly labeled.
Adjust chart dimensions and styling as needed for readability.

Additional Resources

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

PreviousPie Chart Diagrams NextRequirement Diagrams

Last updated 1 month ago

Was this helpful?

quadrantChart title Reach and engagement of campaigns x-axis Low Reach --> High Reach y-axis Low Engagement --> High Engagement quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78]

quadrantChart title Campaign Performance x-axis Low Reach --> High Reach y-axis Low Engagement --> High Engagement quadrant-1 Expand quadrant-2 Promote quadrant-3 Reassess quadrant-4 Improve Campaign A: [0.2, 0.8] Campaign B: [0.5, 0.5] Campaign C: [0.8, 0.3]

quadrantChart title Task Urgency and Importance x-axis Urgent --> Not Urgent y-axis Not Important --> Important quadrant-1 Act Immediately quadrant-2 Plan quadrant-3 Delegate quadrant-4 Eliminate Task A: [0.8, 0.9] Task B: [0.3, 0.4] Task C: [0.5, 0.2]