Introducing Rails UI Charts

Andy Leverenz

@justalever

Today I’m introducing Rails UI Charts, a new charting layer for Rails applications.

The first release includes the chart types most Rails apps need: lines, areas, bars, pies, scatter plots, and metric cards. It gives you a straightforward way to turn Rails data into charts without leaving ERB or building a separate frontend layer.

That covers the first question: what is the number?

Dashboards usually need to answer a few more. Where did the number come from? What changed? Which users are included? What should someone look at next?

So Rails UI Charts Pro is the part of this launch built around those questions.

More than a chart

Charts Pro adds the dashboard patterns that usually turn into custom code:

• Cohort grids for retention and repeat usage
• Funnels for conversion between product stages
• Waterfalls for MRR movement and other running totals
• Metric suites with comparisons, breakdowns, timelines, and trackers
• Financial charts with candlesticks, OHLC data, volume, and moving averages
• Forecast ranges with actuals, projections, and confidence bands
• Box plots, heatmaps, sparkline tables, and timelines
• Live updates, annotations, expanded views, and export

Each helper takes Rails-shaped data and handles the presentation around it. You can start with a single chart and add the surrounding context as the dashboard grows.

The questions dashboards need to answer

A line chart can show that revenue changed. It does not explain why.

That usually leads to a second card, then a table, then a hand-built panel that tries to connect the two. The dashboard grows around the original chart, and every new metric gets its own version of the same work.

Rails UI charts gives those common questions a starting point from the first release.

You can use a cohort grid to see whether customers who signed up in the same month keep coming back. Use a funnel when the order of the steps matters. Use a waterfall when the important story is how a starting total became an ending total through additions and losses.

For financial data, candlesticks and volume can live together with a moving average. For operational data, a tracker can show a period-by-period health check without making a healthy system look like a flat line. For a dashboard header, a metric suite can keep the headline number, comparison, breakdown, timeline, and export action together.

These are small decisions on their own. They add up quickly when a product has twenty or thirty metrics to explain.

The details around the data

The first version of a chart is usually the easy part. The useful version also needs a loading state while a Turbo frame is fetching, an empty state when the query returns nothing, and an error state when the query fails.

Charts Pro treats those states as part of the component. Expanded views give a compact card room to breathe without requiring a second page. Tooltips carry the values people need to compare. PNG and CSV export use the same data that powers the chart.

Live updates follow the same idea. A chart can refresh inside a named Turbo frame while the rest of the dashboard stays in place. You keep the normal Rails request and response cycle, but the dashboard does not need a full page reload for every update.

Built for Rails data

The point is not to make Rails developers learn another dashboard DSL. There are also other really mature (and good) charting gems in the space.

I took inspiration from those and wove them together into a new gem that works with the records, hashes, arrays, and grouped queries already in your app. You prepare the data in Ruby, pass it to the helper, and keep the rest of the view in ERB.

<%= railsui_metric_grid [
  {
    label: "MRR",
    value: @mrr,
    previous: @previous_mrr,
    history: @mrr_history,
    format: :currency
  },
  {
    label: "Churn rate",
    value: @churn_rate,
    previous: @previous_churn_rate,
    history: @churn_history,
    format: :percentage,
    positive_is_good: false
  }
] %>

The same approach works for a retention table, a revenue waterfall, or a financial chart with an overlay. The data stays in your application. The helper takes care of the UI details.

You can also start small. Add one metric card to an existing dashboard, then move to a suite when the surrounding context becomes useful. The helpers do not require you to replace your current chart setup or move data into a separate service.

Two ways to use Rails UI Charts

The core Rails UI Charts gem is open source. You can use it without a Rails UI subscription and add the basic chart helpers to an existing Rails application.

Rails UI Charts Pro is included with an active Rails UI Full Access subscription and includes the app kits, components, auth views, email templates, and ongoing updates.

The distinction is simple. The open gem gives you the charting layer. Full Access adds the more opinionated dashboard pieces that take longer to design, wire up, and keep consistent. A natural extension.

This is also the direction I want Rails UI to keep taking. A component should arrive with the surrounding decisions made. That includes how it looks when data is missing, how it behaves on a narrow screen, what the user sees when they hover, and what happens when they need more detail. AI can get you close with quite a few prompts. That last 5-10% of human tweaks go a long way. That's where we come in.

You can explore Rails UI Charts, see what Charts Pro includes, or view Full Access.

Read the Rails UI Chart docs to learn more about what's included.

Feedback

Submit feedback as a GitHub issue on the repo or reach out directly!