xychart-beta rendering comparison: Chart.js vs beautiful-mermaid
Column 1 shows the Mermaid source, Column 2 renders a Chart.js reference, and Column 3 shows the beautiful-mermaid SVG rendering with theme support.
A minimal bar chart with three data points.
xychart-beta
title "Simple Bar Chart"
x-axis [A, B, C]
bar [10, 20, 30]Bar chart with five categories and varied values.
xychart-beta
title "Product Sales"
x-axis [Widgets, Gadgets, Gizmos, Doodads, Thingamajigs]
bar [150, 230, 180, 95, 310]Bars sorted in descending order to show ranking.
xychart-beta
title "Browser Market Share"
x-axis [Chrome, Safari, Firefox, Edge, Other]
bar [65, 19, 8, 5, 3]A bar chart with only two data points.
xychart-beta
title "Q1 vs Q2"
x-axis [Q1, Q2]
bar [4500, 5200]Bar chart with eight categories and varied heights.
xychart-beta
title "Department Headcount"
x-axis [Eng, Sales, Marketing, Support, HR, Finance, Legal, Ops]
bar [45, 32, 18, 25, 8, 12, 6, 15]Bar chart with small integer values under 10.
xychart-beta
title "Daily Bugs Found"
x-axis [Mon, Tue, Wed, Thu, Fri]
bar [3, 7, 2, 5, 1]Bars with nearly identical heights.
xychart-beta
title "Consistent Output"
x-axis [Week 1, Week 2, Week 3, Week 4]
bar [100, 102, 99, 101]Bars with a wide range of values from small to large.
xychart-beta
title "City Population (thousands)"
x-axis [Town A, Town B, City C, Metro D, Mega E]
bar [5, 25, 150, 800, 3500]Bar chart with ten data points showing monthly figures.
xychart-beta
title "Monthly Signups"
x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct]
bar [120, 145, 190, 210, 250, 280, 310, 295, 340, 380]Bar chart with an explicit y-axis range.
xychart-beta
title "Test Scores"
x-axis [Alice, Bob, Carol, Dave, Eve]
y-axis "Score" 0 --> 100
bar [85, 72, 91, 68, 95]A minimal line chart with four data points.
xychart-beta
title "Simple Trend"
x-axis [Q1, Q2, Q3, Q4]
line [100, 150, 130, 180]Line chart showing a steady upward trend.
xychart-beta
title "Revenue Growth"
x-axis [2019, 2020, 2021, 2022, 2023]
line [500, 620, 780, 950, 1200]Line chart showing a declining trend.
xychart-beta
title "Declining Defect Rate"
x-axis [Sprint 1, Sprint 2, Sprint 3, Sprint 4, Sprint 5, Sprint 6]
line [25, 20, 15, 12, 8, 5]Line chart with values that rise and fall repeatedly.
xychart-beta
title "Daily Temperature Variation"
x-axis [Mon, Tue, Wed, Thu, Fri, Sat, Sun]
line [18, 22, 17, 24, 19, 26, 20]Line chart with values in the thousands.
xychart-beta
title "Website Visitors"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
y-axis "Visitors" 0 --> 50000
line [12000, 18000, 25000, 31000, 38000, 45000]A line chart where values remain approximately constant.
xychart-beta
title "Stable Metric"
x-axis [W1, W2, W3, W4, W5, W6]
line [50, 51, 49, 50, 52, 50]Line chart with a dramatic spike in the middle.
xychart-beta
title "Traffic Spike"
x-axis [6am, 8am, 10am, 12pm, 2pm, 4pm, 6pm]
line [200, 350, 1200, 4500, 2800, 900, 300]Line chart showing a sharp decline followed by recovery.
xychart-beta
title "Stock Price Recovery"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
line [100, 72, 45, 38, 65, 95]Line chart with staircase-like jumps between plateaus.
xychart-beta
title "Pricing Tiers"
x-axis [Free, Basic, Pro, Team, Enterprise]
line [0, 10, 25, 50, 100]Two line series plotted on the same chart.
xychart-beta
title "Planned vs Actual"
x-axis [Q1, Q2, Q3, Q4]
line [100, 200, 300, 400]
line [90, 210, 280, 420]Bars with a line overlaid showing the same data as a trend.
xychart-beta
title "Monthly Revenue"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
y-axis "Revenue (USD)" 0 --> 10000
bar [5000, 6200, 7800, 4500, 9200, 8100]
line [5000, 6200, 7800, 4500, 9200, 8100]Bars showing actual values with a line showing the moving average trend.
xychart-beta
title "Sales with Trend"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
bar [300, 450, 280, 520, 390, 610]
line [300, 375, 343, 388, 388, 425]Bars showing actual performance with a flat target line.
xychart-beta
title "Performance vs Target"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
y-axis "Units" 0 --> 600
bar [320, 410, 380, 520, 290, 480]
line [400, 400, 400, 400, 400, 400]Bars for revenue with a line for profit margin.
xychart-beta
title "Revenue and Profit"
x-axis [Q1, Q2, Q3, Q4]
bar [5000, 6500, 7200, 8100]
line [1200, 1800, 2100, 2600]Two bars and one line series for multi-metric comparison.
xychart-beta
title "Orders, Returns, and Net"
x-axis [Jan, Feb, Mar, Apr, May]
bar [200, 250, 300, 280, 350]
bar [20, 30, 25, 35, 28]
line [180, 220, 275, 245, 322]Bars for costs with a line showing revenue growth.
xychart-beta
title "Costs vs Revenue"
x-axis [2020, 2021, 2022, 2023, 2024]
bar [400, 420, 450, 440, 460]
line [350, 480, 620, 780, 950]Bars with two overlaid line series for comparison.
xychart-beta
title "Actual, Forecast, Target"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
bar [100, 120, 115, 140, 135, 160]
line [95, 110, 120, 130, 140, 150]
line [120, 120, 120, 120, 120, 120]Multiple bar series with a line showing the total.
xychart-beta
title "Channel Performance"
x-axis [Jan, Feb, Mar, Apr]
bar [100, 120, 140, 160]
bar [80, 90, 100, 110]
line [180, 210, 240, 270]Monthly bars with a cumulative line showing running total.
xychart-beta
title "Monthly and Cumulative Sales"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
bar [100, 150, 120, 180, 200, 170]
line [100, 250, 370, 550, 750, 920]Bars for stage counts with a line showing conversion rate.
xychart-beta
title "Funnel Analysis"
x-axis [Visitors, Signups, Activated, Paid, Retained]
bar [10000, 3000, 1500, 800, 500]
line [10000, 3000, 1500, 800, 500]Standard categorical x-axis with string labels.
xychart-beta
title "Fruit Preferences"
x-axis [Apple, Banana, Cherry, Date, Elderberry]
bar [45, 32, 28, 15, 8]Numeric x-axis using the range syntax.
xychart-beta
title "Distribution Curve"
x-axis 0 --> 100
line [5, 15, 35, 60, 80, 95, 80, 60, 35, 15, 5]Y-axis with a title and explicit min/max range.
xychart-beta
title "Temperature Log"
x-axis [6am, 9am, 12pm, 3pm, 6pm, 9pm]
y-axis "Temp (F)" 50 --> 100
line [58, 65, 78, 85, 76, 62]Y-axis with range but no title.
xychart-beta
title "Sensor Readings"
x-axis [T1, T2, T3, T4, T5]
y-axis 0 --> 500
line [120, 250, 380, 310, 190]Categorical x-axis with an axis title.
xychart-beta
title "Quarterly Results"
x-axis "Quarter" [Q1, Q2, Q3, Q4]
y-axis "Revenue ($K)" 0 --> 1000
bar [420, 580, 710, 890]Both x-axis and y-axis have descriptive titles.
xychart-beta
title "Experiment Results"
x-axis "Trial Number" [1, 2, 3, 4, 5, 6]
y-axis "Measurement (mm)" 0 --> 50
line [12, 18, 25, 22, 31, 28]X-axis with long multi-word category labels.
xychart-beta
title "Department Budget"
x-axis [Engineering, Product Management, Customer Success, Human Resources]
bar [850, 420, 310, 180]X-axis with many single-character labels.
xychart-beta
title "Letter Frequency"
x-axis [A, B, C, D, E, F, G, H, I, J, K, L, M]
bar [82, 15, 28, 43, 127, 22, 20, 61, 70, 2, 8, 40, 24]Y-axis spanning a large range from 0 to 100000.
xychart-beta
title "Annual Revenue"
x-axis [2020, 2021, 2022, 2023, 2024]
y-axis "USD" 0 --> 100000
bar [15000, 28000, 45000, 67000, 92000]Y-axis with a tight range to emphasize small differences.
xychart-beta
title "CPU Temperature"
x-axis [10s, 20s, 30s, 40s, 50s, 60s]
y-axis "Celsius" 60 --> 80
line [65, 68, 72, 75, 73, 70]No y-axis declaration; auto-ranged from data.
xychart-beta
title "Auto Range"
x-axis [A, B, C, D, E]
bar [42, 87, 63, 29, 75]X-axis with year labels as categories.
xychart-beta
title "Company Growth"
x-axis [2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025]
line [10, 15, 12, 22, 35, 48, 62, 80]Y-axis configured as percentage from 0 to 100.
xychart-beta
title "Completion Rate"
x-axis [Week 1, Week 2, Week 3, Week 4, Week 5]
y-axis "Percent" 0 --> 100
line [15, 35, 58, 78, 95]Numeric x-axis range combined with bar data.
xychart-beta
title "Histogram"
x-axis 0 --> 50
bar [5, 12, 25, 38, 30, 18, 8]X-axis with a mix of short and longer labels.
xychart-beta
title "Regional Sales"
x-axis [US, EU, Asia Pacific, LATAM, MEA, ANZ]
bar [450, 380, 520, 180, 95, 60]Simple horizontal bar chart.
xychart-beta horizontal
title "Language Popularity"
x-axis [Python, JavaScript, Java, Go, Rust]
bar [30, 25, 20, 12, 8]Horizontal bars with explicit y-axis range.
xychart-beta horizontal
title "Sprint Velocity"
x-axis [Sprint 1, Sprint 2, Sprint 3, Sprint 4, Sprint 5]
y-axis "Story Points" 0 --> 100
bar [45, 52, 68, 72, 80]Line chart in horizontal orientation.
xychart-beta horizontal
title "Response Time Trend"
x-axis [v1.0, v1.1, v1.2, v1.3, v1.4]
line [450, 380, 320, 280, 210]Horizontal chart with both bars and a line.
xychart-beta horizontal
title "Budget vs Actual"
x-axis [Eng, Sales, Marketing, Ops, HR]
bar [500, 350, 200, 150, 100]
line [480, 380, 180, 160, 95]Horizontal bars showing a ranked list.
xychart-beta horizontal
title "Top Features Requested"
x-axis [Dark Mode, API Access, Mobile App, SSO, Webhooks, CSV Export]
bar [245, 198, 176, 152, 134, 112]Horizontal bars with small single-digit values.
xychart-beta horizontal
title "Team Satisfaction Survey"
x-axis [Culture, Compensation, Growth, Balance, Tools]
y-axis "Rating" 0 --> 5
bar [4, 3, 4, 5, 3]Horizontal chart with two bar series.
xychart-beta horizontal
title "This Year vs Last Year"
x-axis [Q1, Q2, Q3, Q4]
bar [200, 250, 300, 280]
bar [180, 220, 270, 310]Horizontal bars with a wide value range.
xychart-beta horizontal
title "GitHub Stars"
x-axis [React, Vue, Angular, Svelte, Solid]
bar [220000, 210000, 95000, 78000, 32000]Horizontal chart with two line series.
xychart-beta horizontal
title "Planned vs Actual Delivery"
x-axis [Feature A, Feature B, Feature C, Feature D]
line [10, 15, 20, 25]
line [12, 14, 22, 23]Horizontal orientation with long category labels.
xychart-beta horizontal
title "Error Categories"
x-axis [Authentication Failure, Database Timeout, Rate Limit Exceeded, Invalid Input]
bar [342, 128, 89, 456]Chart without a title declaration.
xychart-beta
x-axis [A, B, C, D]
bar [10, 20, 30, 40]Chart with a very short one-word title.
xychart-beta
title "Sales"
x-axis [Jan, Feb, Mar]
bar [100, 200, 150]Chart with a long descriptive title.
xychart-beta
title "Quarterly Revenue Comparison Across All Regional Offices 2024"
x-axis [Q1, Q2, Q3, Q4]
bar [1200, 1500, 1800, 2100]Title containing numeric values.
xychart-beta
title "FY2024 Q3 Results"
x-axis [Product A, Product B, Product C]
bar [340, 520, 180]Title containing parentheses and symbols.
xychart-beta
title "Growth Rate (%)"
x-axis [2020, 2021, 2022, 2023]
line [5, 12, 8, 15]Title using the ampersand character.
xychart-beta
title "R&D Investment"
x-axis [2021, 2022, 2023, 2024]
bar [200, 280, 350, 420]Title containing hyphens.
xychart-beta
title "Year-Over-Year Comparison"
x-axis [Jan, Feb, Mar, Apr, May]
bar [100, 120, 90, 140, 130]
line [110, 115, 100, 125, 135]The most minimal possible xychart with just axis and data.
xychart-beta
x-axis [A, B]
bar [1, 2]Chart with every optional element specified.
xychart-beta
title "Complete Chart"
x-axis "Category" [Alpha, Beta, Gamma, Delta]
y-axis "Value" 0 --> 500
bar [120, 340, 250, 410]
line [120, 340, 250, 410]Title containing a colon separator.
xychart-beta
title "Metrics: Daily Active Users"
x-axis [Mon, Tue, Wed, Thu, Fri]
line [1500, 1800, 2200, 2000, 1700]Full year of monthly data points.
xychart-beta
title "Monthly Active Users (2024)"
x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
line [12000, 13500, 15200, 16800, 18500, 20100, 19800, 21500, 23000, 24200, 25800, 28000]Bar chart with 26 data points, one per letter.
xychart-beta
title "Letter Distribution"
x-axis [A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z]
bar [82, 15, 28, 43, 127, 22, 20, 61, 70, 2, 8, 40, 24, 67, 75, 19, 1, 60, 63, 91, 28, 10, 24, 2, 20, 1]Line chart with data for many weeks.
xychart-beta
title "Weekly Downloads"
x-axis [W1, W2, W3, W4, W5, W6, W7, W8, W9, W10, W11, W12, W13, W14, W15, W16, W17, W18, W19, W20]
line [500, 520, 480, 550, 600, 580, 620, 650, 700, 680, 720, 750, 800, 780, 820, 850, 900, 880, 920, 950]Three data series across 12 months.
xychart-beta
title "Product Lines Revenue"
x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
bar [500, 520, 540, 580, 600, 620, 650, 640, 680, 700, 720, 750]
bar [300, 320, 310, 350, 370, 380, 400, 390, 420, 440, 450, 470]
line [800, 840, 850, 930, 970, 1000, 1050, 1030, 1100, 1140, 1170, 1220]Two bar series over 12 months for year comparison.
xychart-beta
title "2023 vs 2024 Monthly Sales"
x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
bar [180, 200, 220, 240, 260, 250, 270, 290, 310, 330, 350, 380]
bar [210, 230, 250, 270, 300, 290, 310, 330, 360, 380, 400, 430]Hourly data points across a full day.
xychart-beta
title "Hourly Server Load"
x-axis [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
line [15, 12, 10, 8, 7, 9, 18, 45, 72, 85, 88, 90, 82, 78, 80, 85, 88, 75, 60, 45, 35, 28, 22, 18]Dataset with values in the millions.
xychart-beta
title "Cloud Spending by Month"
x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
y-axis "USD" 0 --> 500000
bar [120000, 135000, 148000, 162000, 178000, 195000, 210000, 228000, 245000, 268000, 290000, 315000]Three overlapping line series over 10 data points.
xychart-beta
title "Multi-Region Latency"
x-axis [T1, T2, T3, T4, T5, T6, T7, T8, T9, T10]
line [45, 48, 42, 50, 55, 52, 47, 44, 49, 46]
line [120, 115, 125, 118, 122, 130, 128, 135, 132, 127]
line [200, 210, 195, 205, 215, 220, 208, 212, 218, 225]Quarterly data spanning four years.
xychart-beta
title "Quarterly Earnings (2021-2024)"
x-axis [21Q1, 21Q2, 21Q3, 21Q4, 22Q1, 22Q2, 22Q3, 22Q4, 23Q1, 23Q2, 23Q3, 23Q4, 24Q1, 24Q2, 24Q3, 24Q4]
bar [120, 140, 135, 160, 155, 175, 170, 190, 185, 210, 205, 230, 225, 250, 245, 270]Dense bar chart with 15 categories and an overlay line.
xychart-beta
title "Daily Active Users (First 15 Days)"
x-axis [D1, D2, D3, D4, D5, D6, D7, D8, D9, D10, D11, D12, D13, D14, D15]
bar [500, 520, 510, 530, 540, 480, 450, 520, 550, 540, 560, 570, 510, 490, 530]
line [500, 510, 510, 520, 530, 520, 510, 515, 525, 530, 535, 540, 535, 530, 530]Chart with only one data point.
xychart-beta
title "Single Value"
x-axis [Only]
bar [42]Bar chart where every value is zero.
xychart-beta
title "No Activity"
x-axis [Mon, Tue, Wed, Thu, Fri]
bar [0, 0, 0, 0, 0]Chart with values in the millions.
xychart-beta
title "National GDP (millions)"
x-axis [Country A, Country B, Country C]
bar [5200000, 3800000, 2900000]Chart with very small decimal-like integer values.
xychart-beta
title "Trace Amounts"
x-axis [Sample A, Sample B, Sample C, Sample D]
bar [1, 2, 1, 3]Minimal chart with exactly two data points.
xychart-beta
title "Before and After"
x-axis [Before, After]
bar [25, 75]All bars have the identical value.
xychart-beta
title "Equal Distribution"
x-axis [A, B, C, D, E]
bar [50, 50, 50, 50, 50]One value is dramatically larger than the rest.
xychart-beta
title "Revenue by Product"
x-axis [Niche A, Niche B, Flagship, Niche C, Niche D]
bar [50, 30, 5000, 40, 20]Values that decrease to zero.
xychart-beta
title "Declining Interest"
x-axis [Week 1, Week 2, Week 3, Week 4, Week 5]
line [100, 60, 25, 8, 0]Values that start at zero and increase.
xychart-beta
title "Ramp Up"
x-axis [Day 1, Day 2, Day 3, Day 4, Day 5]
bar [0, 10, 50, 150, 400]Values alternating between high and low.
xychart-beta
title "Alternating Pattern"
x-axis [A, B, C, D, E, F, G, H]
bar [100, 10, 100, 10, 100, 10, 100, 10]Typical monthly revenue bar chart for a SaaS company.
xychart-beta
title "Monthly Revenue (2024)"
x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
y-axis "Revenue ($K)" 0 --> 500
bar [180, 195, 210, 225, 250, 268, 285, 275, 300, 320, 340, 380]Cumulative user growth over months showing accelerating adoption.
xychart-beta
title "Cumulative Registered Users"
x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
y-axis "Users" 0 --> 50000
line [2500, 5200, 8800, 13100, 18000, 23500, 29200, 34800, 39500, 43200, 46500, 50000]Average monthly temperature showing seasonal variation.
xychart-beta
title "Average Monthly Temperature"
x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
y-axis "Temp (F)" 20 --> 100
line [32, 35, 45, 58, 68, 78, 85, 83, 74, 60, 48, 36]Weekly stock price movement over a quarter.
xychart-beta
title "ACME Corp Stock Price"
x-axis [W1, W2, W3, W4, W5, W6, W7, W8, W9, W10, W11, W12, W13]
y-axis "Price ($)" 80 --> 160
line [100, 105, 98, 112, 108, 120, 115, 125, 135, 128, 140, 148, 155]Customer satisfaction survey scores by category.
xychart-beta
title "Customer Satisfaction Survey"
x-axis [Ease of Use, Performance, Support, Pricing, Features, Reliability]
y-axis "Score" 0 --> 5
bar [4, 3, 5, 3, 4, 4]P95 API response times across endpoints.
xychart-beta
title "P95 Response Time by Endpoint"
x-axis [/users, /orders, /products, /search, /auth, /reports]
y-axis "ms" 0 --> 1000
bar [120, 250, 180, 450, 80, 850]Daily page views and unique visitors for a week.
xychart-beta
title "Website Traffic"
x-axis [Mon, Tue, Wed, Thu, Fri, Sat, Sun]
bar [8500, 9200, 9800, 9500, 8800, 5200, 4100]
line [3200, 3500, 3800, 3600, 3400, 2100, 1800]Remaining story points over a two-week sprint.
xychart-beta
title "Sprint Burndown"
x-axis [D1, D2, D3, D4, D5, D6, D7, D8, D9, D10]
y-axis "Story Points" 0 --> 80
line [72, 65, 58, 50, 45, 38, 30, 22, 12, 0]
line [72, 65, 58, 50, 43, 36, 29, 22, 14, 0]Marketing conversion funnel from impressions to purchases.
xychart-beta
title "Marketing Funnel"
x-axis [Impressions, Clicks, Signups, Trials, Purchases]
bar [50000, 5000, 1200, 400, 150]HTTP error rates by hour during an incident.
xychart-beta
title "Error Rate During Incident"
x-axis [10am, 11am, 12pm, 1pm, 2pm, 3pm, 4pm, 5pm]
y-axis "Errors/min" 0 --> 500
bar [5, 12, 45, 380, 420, 250, 35, 8]
line [5, 12, 45, 380, 420, 250, 35, 8]Headcount growth at a startup over years.
xychart-beta
title "Company Headcount"
x-axis [2018, 2019, 2020, 2021, 2022, 2023, 2024]
bar [8, 15, 25, 45, 80, 120, 185]Customer churn rate percentage over months.
xychart-beta
title "Monthly Churn Rate"
x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
y-axis "Churn %" 0 --> 10
line [5, 4, 5, 4, 3, 3, 4, 3, 3, 2, 2, 2]Conversion rates for control vs variant across segments.
xychart-beta
title "A/B Test Conversion Rates"
x-axis [Mobile, Desktop, Tablet, New Users, Returning]
bar [3, 5, 4, 2, 6]
bar [4, 7, 5, 3, 8]Monthly cloud infrastructure costs by service.
xychart-beta
title "Monthly Cloud Costs"
x-axis [Compute, Storage, Database, Network, CDN, Monitoring, Other]
y-axis "USD" 0 --> 20000
bar [15000, 8000, 6500, 3200, 2800, 1500, 900]Number of production deployments per month.
xychart-beta
title "Production Deployments per Month"
x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
bar [12, 15, 18, 22, 20, 25, 28, 24, 30, 32, 35, 38]
line [12, 15, 18, 22, 20, 25, 28, 24, 30, 32, 35, 38]