XY Chart vs Pie and Bar Charts in Mermaid: when to use each

Choosing the right chart type is half the battle when you're visualizing data. Mermaid offers pie charts, bar charts, line plots, and XY scatter plots—each designed to highlight different patterns in your data. A pie chart excels at showing composition; a bar chart compares discrete categories; an XY chart reveals correlations. Picking the wrong one obscures your message instead of clarifying it.

The data viz landscape: pie, bar, and XY

Pie charts answer "what's the breakdown?"—they show proportions of a whole. They work when you have 3–5 categories and viewers need to instantly grasp share (e.g., "X% of users are free, Y% are pro").

Bar charts answer "how do things rank?"—they compare values across categories. They're your go-to for trends over time, comparisons across teams, or metrics by product line.

XY scatter plots answer "is there a relationship?"—they reveal correlations, clusters, and outliers in two-variable data. If you're asking "as X grows, does Y grow too?", scatter plots are the answer.

Here's when each shines:

graph TD
    Q["What's your main question?"]
    Q -->|"What share of the whole?"| A["Pie Chart"]
    Q -->|"How do values rank or trend?"| B["Bar Chart"]
    Q -->|"Is there a relationship between two variables?"| C["XY Scatter Plot"]
    
    A --> A1["Best for 3-5 categories"]
    A --> A2["Instant visual split"]
    
    B --> B1["Best for ranking or time series"]
    B --> B2["Easy label comparison"]
    
    C --> C1["Best for finding correlations"]
    C --> C2["Reveals clusters and outliers"]

Pie charts: composition at a glance

Pie charts show parts of a whole. They're the most recognizable chart—everyone gets them. Use one when:

• You have 3–5 categories that sum to 100% (more than 5 slices become hard to parse)
• Proportions are what matters, not exact values
• Your audience needs to grasp the split instantly

Good use case: monthly churn breakdown by reason (user churn / pricing concerns / feature gaps / competitor switch).

pie title User Churn Reasons (Q2)
    "Feature gaps" : 42
    "Pricing" : 28
    "Bugs" : 18
    "Other" : 12

Bad use case: tracking response time percentiles by endpoint over time. You'd lose the trend and be forced to make too many slices.

Bar charts: ranking and trends

Bar charts compare values across categories or track trends over time. They're flexible and clear. Use one when:

• You're comparing quantities across categories (teams, products, regions)
• You're tracking a metric over time (daily, weekly, monthly)
• You need precise label readability (pie slices make labels hard to read)
• You have more than 5 categories

Good use case: API response times across regions (NA, EU, APAC, SA).

xychart-beta
    x-axis [NA, EU, APAC, SA]
    y-axis "Response Time (ms)" 0 --> 300
    line [85, 92, 110, 78]

Another example: team velocity over sprints.

xychart-beta
    x-axis [Sprint 1, Sprint 2, Sprint 3, Sprint 4]
    y-axis "Points Completed" 0 --> 100
    bar [72, 88, 81, 95]

Bar charts also handle negative values gracefully (churn vs growth), while pie charts cannot.

XY scatter plots: correlations and outliers

Scatter plots plot two continuous variables against each other. They're powerful for discovering relationships that tables hide. Use one when:

• You're looking for correlation (does app size correlate with crash rate?)
• You want to spot outliers (which users have extreme session length?)
• You have hundreds of data points and need to see clustering
• You're preparing for a regression or causal analysis

Good use case: deployment frequency vs change lead time (a DORA metric pair).

xychart-beta
    title Deployment Frequency vs Lead Time (DORA Metrics)
    x-axis "Lead Time (days)" 0 --> 30
    y-axis "Deployments/Day" 0 --> 10
    scatter [
        (2, 8.5), (3, 7.2), (5, 6.1), (8, 4.3),
        (12, 2.8), (15, 2.1), (20, 1.2), (28, 0.8)
    ]

This shows a clear negative correlation: teams that deploy faster have shorter lead times.

Another example: product adoption by pricing tier.

xychart-beta
    title Tier vs Active Users (Adoption Curve)
    x-axis "Days Since Signup" 0 --> 180
    y-axis "Active Users %" 0 --> 100
    scatter [
        (5, 10), (10, 18), (20, 35), (30, 52),
        (45, 68), (60, 75), (90, 78), (180, 82)
    ]

Scatter plots reveal if adoption plateaus or continues growing.

Comparison table: at a glance

Chart Type	Best For	Max Categories/Points	Encode Values	Show Trends
Pie	Proportions of a whole	3–5	Angle / area	No (static)
Bar	Ranking / comparison / time series	Unlimited	Height	Yes (over time)
XY Scatter	Correlation / clustering	Unlimited pairs	X and Y position	Outliers & relationships

Mixing chart types: when and why

Sometimes one chart isn't enough. A dashboard often combines types:

• Timeline of totals (bar chart) + breakdown this month (pie chart)
• Daily active users (bar chart over time) + time spent vs retention (scatter plot)
• Team headcount by role (bar chart) + cost per hire by role (pie chart)

Mermaid supports embedding one diagram type per file, but in a dashboard tool like MermaidCreator, you can create separate diagrams and compose them in Markdown or a slide deck.

Performance and readability tips

Pie charts: Keep it to 5 slices max. Label each slice with both the category and the percentage. If you have more categories, group the smallest ones into "Other."

Bar charts: Use horizontal bars for long category names. Add gridlines for easier value reading. Sort by value (descending) unless time is the X-axis.

XY scatter plots: If you have 1000+ points, consider adding a trend line (Mermaid's basic scatter plots don't, but you can describe one in accompanying text). Color-code by category if grouping is meaningful. Use a reasonable scale to avoid false correlations.

FAQ

Can I mix a line and bar on the same chart in Mermaid?
Yes—Mermaid's xychart-beta supports multiple series of different types. You can plot bars and lines together to compare trends.

What if I have more than 5 pie slices?
Combine the smallest slices into "Other" or use a bar chart instead. Pie charts lose clarity beyond 5–6 segments.

Should I use a scatter plot or a line chart?
Scatter plots show individual points and relationships; line charts emphasize continuity and trends. If X is time and you want to see the progression, a line chart is clearer. If you're exploring correlation, scatter is better.

How many points can an XY scatter plot handle?
Mermaid can handle hundreds of points, but rendering slows with 1000+. For massive datasets, sample or use an external tool like Plotly.

Ready to visualize your data effectively? Head to the MermaidCreator editor and experiment with pie, bar, and scatter charts to find the best fit for your story.