Rails UI Charts
Charts that feel like Rails
Chart and metric components for Rails, as plain ERB helpers. Every chart on this page is the shipped component.
Dashboard metrics
A dashboard in one helper per card
railsui_metric_card
renders the label, value, delta, previous-period comparison, chart, and footer as a single component.
MRR
$17,090.00 previous period
| Category | Comparison category | MRR | Previous period |
|---|---|---|---|
| Aug 31 | Aug 24 | 17244.32 | 15975.94 |
| Sep 1 | Aug 25 | 17431.56 | 16227.72 |
| Sep 2 | Aug 26 | 17670.29 | 16276.34 |
| Sep 3 | Aug 27 | 17769.32 | 16572.8 |
| Sep 4 | Aug 28 | 18125.61 | 16792.72 |
| Sep 5 | Aug 29 | 18277.18 | 16887.17 |
| Sep 6 | Aug 30 | 18450.0 | 17089.85 |
ARR
$205,417.00 previous period
| Category | Comparison category | ARR | Previous period |
|---|---|---|---|
| Aug 31 | Aug 24 | 207887.66 | 192289.3 |
| Sep 1 | Aug 25 | 209558.15 | 193794.82 |
| Sep 2 | Aug 26 | 212884.75 | 196660.71 |
| Sep 3 | Aug 27 | 214065.24 | 199328.06 |
| Sep 4 | Aug 28 | 216248.84 | 199881.44 |
| Sep 5 | Aug 29 | 219087.45 | 202295.15 |
| Sep 6 | Aug 30 | 221400.0 | 205416.59 |
Active subscribers
795 previous period
| Category | Comparison category | Active subscribers | Previous period |
|---|---|---|---|
| Aug 31 | Aug 24 | 802.63 | 760.13 |
| Sep 1 | Aug 25 | 808.61 | 766.12 |
| Sep 2 | Aug 26 | 817.05 | 772.47 |
| Sep 3 | Aug 27 | 823.74 | 777.12 |
| Sep 4 | Aug 28 | 830.13 | 783.23 |
| Sep 5 | Aug 29 | 834.92 | 788.5 |
| Sep 6 | Aug 30 | 842.0 | 794.8 |
New trials
55 previous period
| Category | Comparison category | New trials | Previous period |
|---|---|---|---|
| Aug 31 | Aug 24 | 9.44 | 7.17 |
| Sep 1 | Aug 25 | 8.93 | 7.87 |
| Sep 2 | Aug 26 | 7.11 | 8.73 |
| Sep 3 | Aug 27 | 9.55 | 7.3 |
| Sep 4 | Aug 28 | 8.63 | 6.41 |
| Sep 5 | Aug 29 | 9.54 | 8.59 |
| Sep 6 | Aug 30 | 9.0 | 8.81 |
Gross volume
$20,815.00 previous period
| Category | Comparison category | Gross volume | Previous period |
|---|---|---|---|
| Aug 31 | Aug 24 | 3265.23 | 2726.3 |
| Sep 1 | Aug 25 | 3577.16 | 3134.75 |
| Sep 2 | Aug 26 | 3303.33 | 3019.28 |
| Sep 3 | Aug 27 | 3348.48 | 3052.7 |
| Sep 4 | Aug 28 | 3644.69 | 3168.79 |
| Sep 5 | Aug 29 | 3785.35 | 2831.65 |
| Sep 6 | Aug 30 | 3480.0 | 2881.72 |
Churn rate
2.7% previous period
| Category | Comparison category | Churn rate | Previous period |
|---|---|---|---|
| Aug 31 | Aug 24 | 2.65 | 3.04 |
| Sep 1 | Aug 25 | 2.6 | 3.07 |
| Sep 2 | Aug 26 | 2.65 | 2.97 |
| Sep 3 | Aug 27 | 2.49 | 2.98 |
| Sep 4 | Aug 28 | 2.47 | 2.82 |
| Sep 5 | Aug 29 | 2.4 | 2.85 |
| Sep 6 | Aug 30 | 2.4 | 2.7 |
Trends
Track change over time
Line and area charts with an optional previous-period overlay on a single shared axis.
Revenue over time
Area chart comparing this year against the last.
| Category | Comparison category | This year | Last year |
|---|---|---|---|
| Jan | Jan | 32000 | 28500 |
| Feb | Feb | 35000 | 30100 |
| Mar | Mar | 42000 | 33400 |
| Apr | Apr | 38000 | 35900 |
| May | May | 48290 | 37200 |
| Jun | Jun | 52000 | 41800 |
Comparisons
Compare categories and proportions
Bar, column, pie, donut, and polar area charts for distributions and part-to-whole relationships.
Revenue and churn
Two shapes, two scales.
| Category | Revenue | Churn rate |
|---|---|---|
| Jan | 32000 | 4.2 |
| Feb | 35000 | 3.9 |
| Mar | 42000 | 3.4 |
| Apr | 38000 | 3.6 |
| May | 48290 | 3.1 |
| Jun | 52000 | 2.8 |
Revenue by plan
Stacked columns: totals, and what they are made of.
| Category | Starter | Pro | Enterprise |
|---|---|---|---|
| Jan | 8200 | 14800 | 9000 |
| Feb | 9100 | 16200 | 9700 |
| Mar | 10400 | 18900 | 12700 |
| Apr | 11000 | 19400 | 7600 |
| May | 12300 | 22100 | 13890 |
| Jun | 13100 | 24600 | 14300 |
Each plan on its own
Small multiples against a shared scale.
Starter
| Category | Value |
|---|---|
| Jan | 8200 |
| Feb | 9100 |
| Mar | 10400 |
| Apr | 11000 |
| May | 12300 |
| Jun | 13100 |
Pro
| Category | Value |
|---|---|
| Jan | 14800 |
| Feb | 16200 |
| Mar | 18900 |
| Apr | 19400 |
| May | 22100 |
| Jun | 24600 |
Enterprise
| Category | Value |
|---|---|
| Jan | 9000 |
| Feb | 9700 |
| Mar | 12700 |
| Apr | 7600 |
| May | 13890 |
| Jun | 14300 |
Customers by plan
Horizontal bar chart.
| Category | Customers |
|---|---|
| Starter | 120 |
| Pro | 85 |
| Enterprise | 32 |
Monthly revenue
Column chart for comparing values across categories.
| Category | Revenue |
|---|---|
| Jan | 32000 |
| Feb | 35000 |
| Mar | 42000 |
| Apr | 38000 |
| May | 48290 |
| Jun | 52000 |
Revenue by plan
Pie chart.
| Category | Value |
|---|---|
| Starter | 12000 |
| Pro | 28000 |
| Enterprise | 42000 |
Customers by plan
Donut chart.
| Category | Value |
|---|---|
| Starter | 120 |
| Pro | 85 |
| Enterprise | 32 |
Traffic sources
Polar area chart.
| Category | Value |
|---|---|
| Direct | 42 |
| Social | 28 |
| Organic | 18 |
| Other | 12 |
Relationships
Explore correlations and profiles
Scatter, bubble, and radar charts for multi-dimensional data.
Experiment results
Scatter plot for correlation data.
| Category | Results |
|---|---|
| 1 | 10, 20 |
| 2 | 15, 25 |
| 3 | 20, 30 |
| 4 | 25, 35 |
| 5 | 30, 40 |
| 6 | 12, 18 |
| 7 | 18, 28 |
| 8 | 22, 32 |
| 9 | 28, 38 |
| 10 | 35, 45 |
Market segments
Bubble chart with size-encoded values.
| Category | Segments |
|---|---|
| 10 | 10, 20, 15 |
| 20 | 20, 35, 25 |
| 30 | 30, 25, 20 |
| 40 | 40, 45, 35 |
| 50 | 50, 30, 30 |
| 60 | 60, 55, 40 |
Feature comparison
Radar chart for multi-dimensional scores.
| Category | Score |
|---|---|
| Speed | 80 |
| Reliability | 90 |
| Comfort | 70 |
| Safety | 95 |
| Efficiency | 85 |
| Design | 75 |
States
Day one, mid-request, and when it breaks
A new account has no data, a Turbo frame spends a moment fetching, and queries time out. Each state holds the chart's footprint so nothing below it moves.
Empty
A new account, before it has anything to plot.
No revenue yet
Charges appear here once you take your first payment.
Loading
Stands in for the text; leaves the plot empty.
Error
A failure reads as a failure, not as an absence.
Couldn't load revenue
The query timed out. Try a shorter range.
What a subscription adds
Everything above is open source and stays that way. Pro adds metric suites, computed helpers, financial charts, forecasts, and dashboard extras for the work a SaaS dashboard reaches for after the first chart is on the page.
MRR movement
ProWhat moved between two monthly totals.
| Category | Change | Running total |
|---|---|---|
| Starting | 14650.0 | |
| New | 4200.0 | 18850.0 |
| Reactivation | 900.0 | 19750.0 |
| Expansion | 2100.0 | 21850.0 |
| Contraction | -1200.0 | 20650.0 |
| Churn | -2650.0 | 18000.0 |
| Ending | 18000.0 |
Included with a subscription
Get full accessRetention by cohort
ProEach month's signups, followed across the months after.
| Cohort | Month 0 | Month 1 | Month 2 | Month 3 | Month 4 | Month 5 | Month 6 | Month 7 |
|---|---|---|---|---|---|---|---|---|
| Jan 2026 | 100% | 82% | 74% | 69% | 65% | 62% | 60% | 58% |
| Feb 2026 | 100% | 79% | 71% | 66% | 63% | 60% | 58% | |
| Mar 2026 | 100% | 81% | 73% | 68% | 64% | 61% | ||
| Apr 2026 | 100% | 74% | 63% | 57% | 54% | |||
| May 2026 | 100% | 71% | 60% | 55% | ||||
| Jun 2026 | 100% | 76% | 66% | |||||
| Jul 2026 | 100% | 79% | ||||||
| Aug 2026 | 100% |
Included with a subscription
Get full accessService health
ProNinety days of checks in the width of a card.
Included with a subscription
Get full accessPlans at a glance
ProValue, direction, and shape in one row each.
| Solo | $18,450.00 | +14.6% | |
|---|---|---|---|
| Team | $12,380.00 | +4.0% | |
| Enterprise | $8,940.00 | -6.9% | |
| Legacy | $2,110.00 | +0.5% |
Included with a subscription
Get full accessDeploys and incidents
ProSpans on a time axis, lanes by service.
| Category | Timeline |
|---|---|
| web | 1786352400000, 1786353600000 |
| api | 1786354800000, 1786361400000 |
| worker | 1786366800000, 1786367700000 |
| cdn | 1786356000000, 1786365900000 |
| 5 | 1786350600000, 1786377600000 |
Included with a subscription
Get full accessTop customers by spend
ProThe ranked row every overview ends with.
| $12,840.00 | |
| $9,910.00 | |
| $6,480.00 | |
| $4,120.00 | |
| $2,260.00 |
Included with a subscription
Get full accessSpend by category
ProPart-to-whole past what a pie can carry.
| Category | Value |
|---|---|
| Payroll | 48200 |
| Hosting | 12400 |
| Contractors | 9100 |
| Tooling | 6300 |
| Marketing | 5200 |
| Travel | 2800 |
Included with a subscription
Get full accessOHLC with volume
ProFinancial price movement, volume, and an overlay without custom Apex config.
| Category | Price | Volume | 20-day avg |
|---|---|---|---|
| 2026-08-12 | 118.0, 126.0, 115.0, 124.0 | 24000 | 121 |
| 2026-08-13 | 124.0, 129.0, 121.0, 122.0 | 31000 | 123 |
| 2026-08-14 | 122.0, 131.0, 120.0, 130.0 | 36000 | 126 |
| 2026-08-15 | 130.0, 136.0, 128.0, 134.0 | 42000 | 129 |
| 2026-08-16 | 134.0, 138.0, 129.0, 131.0 | 38000 | 131 |
| 2026-08-17 | 131.0, 141.0, 130.0, 139.0 | 45000 | 134 |
Included with a subscription
Get full accessDistribution by service
ProFive-number summaries from raw response-time samples.
| Category | Response time |
|---|---|
| Web | 86.0, 118.0, 141.0, 210.0, 310.0 |
| API | 94.0, 138.0, 168.0, 238.0, 420.0 |
| Worker | 180.0, 275.0, 360.0, 475.0, 760.0 |
Included with a subscription
Get full accessUsage heatmap
ProA nested hash becomes rows, columns, and shaded cells.
| Category | Mon | Tue | Wed | Thu | Fri |
|---|---|---|---|---|---|
| 8 AM | 18 | 24 | 21 | 28 | 26 |
| 12 PM | 44 | 52 | 48 | 58 | 54 |
| 4 PM | 38 | 41 | 46 | 49 | 35 |
Included with a subscription
Get full accessForecast range
ProActuals, projection, and confidence band as one helper call.
| Category | Range | Actual | Forecast |
|---|---|---|---|
| Aug 1 | 18696.66, 19297.39 | 17200 | 18997.02 |
| Aug 2 | 18927.59, 19777.15 | 17640 | 19352.37 |
| Aug 3 | 19187.47, 20227.97 | 18020 | 19707.72 |
| Aug 4 | 19462.33, 20663.8 | 18360 | 20063.07 |
Included with a subscription
Get full accessSignups, annotated
ProDeploys, incidents, and the target on one chart.
| Category | Signups |
|---|---|
| Aug 7 | 42 |
| Aug 8 | 38 |
| Aug 9 | 21 |
| Aug 10 | 57 |
| Aug 11 | 61 |
| Aug 12 | 55 |
| Aug 13 | 64 |
Included with a subscription
Get full accessConversion funnel
ProStages in order, with drop-off between each one.
| Stage | Count | From previous | Of total |
|---|---|---|---|
| Visited pricing | 12400 | 100.0% | 100.0% |
| Started trial | 4800 | 38.7% | 38.7% |
| Activated | 2600 | 54.2% | 21.0% |
| Subscribed | 980 | 37.7% | 7.9% |
Included with a subscription
Get full accessGap-filled time series
ProEvery day in the range, including the ones with no rows.
| Category | Value |
|---|---|
| Aug 7 | 42 |
| Aug 8 | 38 |
| Aug 9 | 21 |
| Aug 10 | 57 |
| Aug 11 | 61 |
| Aug 12 | 55 |
| Aug 13 | 64 |
Included with a subscription
Get full accessExport
ProPNG and CSV, taken from the chart already on screen.
| Category | Value |
|---|---|
| Jan | 32000 |
| Feb | 35000 |
| Mar | 42000 |
| Apr | 38000 |
| May | 48290 |
| Jun | 52000 |
Included with a subscription
Get full accessLive updates
ProNew numbers arrive by Turbo Stream and the chart moves to them.
Signups today
41
| Category | Value |
|---|---|
| 10:00 | 18 |
| 10:05 | 24 |
| 10:10 | 21 |
| 10:15 | 32 |
| 10:20 | 28 |
| 10:25 | 37 |
| 10:30 | 34 |
| 10:35 | 41 |
Updated just now
Included with a subscription
Get full accessGet started
Install Rails UI Charts in minutes
Open source for the basics. Full access adds waterfalls, cohorts, funnels, treemaps, trackers, sparkline tables, and timelines, plus live updates and export.
gem "railsui_charts"
bundle install
rails g railsui_charts:install
Every chart above, plus the ones a dashboard needs
Cohorts, waterfalls, funnels, candlesticks, box plots, forecasts, trackers, live updates, and export. Included with every Rails UI subscription, alongside the app kits and components.