Charts

Rails helpers for charts your product dashboard can keep.

Rails UI Charts wraps ApexCharts in Ruby helpers. Most examples start with an ActiveRecord group query and render a themed chart, reserved loading space, dark mode support, and a screen-reader table.

The chart gem stands on its own. Use it in any Rails app, with or without the main Rails UI gem.

Rails UI Charts is free and open source. Rails UI Charts Pro comes with Full Access and builds on the open gem. Keep the same helpers, then add metric suites, cohorts, funnels, waterfalls, financial charts, forecasts, trackers, export, and live updates when your dashboard needs them.

See every chart rendered on one page

Installation

# Gemfile
gem "railsui_charts"

bundle install
rails g railsui_charts:install

# Build mode (esbuild, Vite, Webpack)
yarn add @getrailsui/charts apexcharts

# No-build (importmap)
bin/importmap pin apexcharts

The installer imports the stylesheet. Importmap apps load controllers from the gem. Bundled apps register controllers from @getrailsui/charts, so updates move with the package instead of leaving copied controller files behind in your app.

// app/javascript/controllers/index.js
import { registerRailsuiCharts } from "@getrailsui/charts"

registerRailsuiCharts(application)

Quick start

Most dashboard charts start with one grouped query.

def show
  @revenue = Order.paid.group_by_month(:created_at).sum(:total)
end

@revenue = Order.paid.group_by_month(:created_at).sum(:total)

<%= railsui_chart @revenue, type: :area, format: :short_currency, height: 240 %>

Pass a label => value hash to railsui_chart. The rest of the page builds from that shape.

Chart types

Choose a chart with type:. The helpers keep data, formatting, and height options consistent across chart types.

<%= railsui_chart @signups, type: :line, label: "Signups", height: 240 %>

<%# Smooth it when the shape matters more than each point %>
<%= railsui_chart @signups, type: :line, curve: "smooth", height: 240 %>

@revenue = Order.paid.group_by_month(:created_at).sum(:total)

<%= railsui_chart @revenue, type: :area, format: :short_currency, height: 240 %>

<%= railsui_chart @orders_by_month, type: :column, format: :number, height: 240 %>

<%# `stacked: "percent"` makes it 100% stacked instead %>
<%= railsui_chart @plans_by_month, type: :column, stacked: true, height: 240 %>

<%= railsui_chart @traffic_by_source, type: :bar, format: :human, height: 240 %>

<%= railsui_chart @last_30_days, type: :sparkline, height: 60 %>

<%= railsui_chart @customers_by_plan, type: :donut, height: 260 %>

<%= railsui_chart @customers_by_plan, type: :pie, height: 260 %>

<%= railsui_chart @feature_usage, type: :radar, height: 280 %>

<%= railsui_chart @feature_usage, type: :polar_area, height: 280 %>

@seats_vs_spend = Account.pluck(:seats, :mrr).map { |x, y| { x: x, y: y } }

<%= railsui_chart [{ name: "Accounts", data: @seats_vs_spend }], type: :scatter, height: 260 %>

# z becomes the radius
@accounts = Account.pluck(:seats, :mrr, :tickets).map { |x, y, z| { x:, y:, z: } }

<%= railsui_chart [{ name: "Accounts", data: @accounts }], type: :bubble, height: 260 %>

Multiple series

Pass an array of { name:, data: } hashes. The data key separates series, so single-series charts can stay plain hashes.

<%= railsui_chart [
      { name: "Pro",  data: @pro_by_month },
      { name: "Team", data: @team_by_month }
    ], type: :area, height: 260 %>

The palette assigns colors in order. Once a chart needs more than eight series, split the data into small multiples.

Combo and dual axis

Set type: on a series to mix shapes. Set axis: :right when a series needs its own scale.

A common dashboard chart pairs volume columns with a rate line. Revenue and churn do not share a useful range. Put both on one scale and the churn line disappears along the floor.

# Two measures that share an x-axis and nothing else: money in the tens
# of thousands, a rate in single-digit percent. Plotted against one
# scale the churn line sits flat on the floor and says nothing.
@revenue_by_month = Order.paid.group_by_month(:created_at).sum(:total)
@churn_by_month   = Account.churn_rate_by_month

<%= railsui_chart [
      { name: "Revenue",    data: @revenue_by_month, type: :column, format: :short_currency },
      { name: "Churn rate", data: @churn_by_month,   type: :line, axis: :right, format: :percentage }
    ], height: 300 %>

Each side can format itself. Put format: on a series so money and percentages keep their own units on axes and tooltips.

The helper keeps both scales on the same tick count, so the gridlines line up.

Axis labels use the color of the series they measure, which helps when both sides carry a scale.

Comparing periods

compare: adds a dashed previous-period series and changes the tooltip into current, previous, and delta rows.

<%= railsui_chart @this_week,
      type: :area,
      compare: @last_week,
      format: :currency,
      height: 260 %>

Anchor both windows to the same date. If each window measures from its own end, the delta loses meaning.

For metrics where lower is better, such as churn, refunds, or latency, pass trend_up_is_good: false. The delta color then follows the result, not the direction.

Small multiples

Small multiples give each series its own chart while keeping a shared y-scale. Use them when one chart has too many lines to scan.

<%= railsui_small_multiples @plans, type: :area, columns: 3, height: 120 %>

The shared scale keeps small values from looking inflated.

Metric cards

Metric cards pair a headline number with period change and a sparkline. Use them when the number matters as much as the trend.

<%= railsui_metric_card label: "MRR",
      value: @mrr,
      previous: @previous_mrr,
      history: @mrr_by_day,
      compare: @previous_mrr_by_day,
      format: :currency,
      expand: true %>

expand: true turns the footer link into a larger view of the same series. A compact sparkline shows direction; the expanded chart gives values room.

For a compact stack without the card, use railsui_metric:

<%= railsui_metric label: "Active trials", value: 128, change: 12.4 %>

Filters

Use one filter row for a dashboard. Every card then renders against the same date range and comparison setting.

def show
  @filters = RailsuiCharts::Filters.new(params)

  current = revenue_for(@filters.range)
  previous = @filters.previous_range && revenue_for(@filters.previous_range)

  @metrics = [
    { label: "MRR", value: current.values.last, previous: previous&.values&.last,
      format: :currency, history: current, compare: previous }
  ]
end

private

def revenue_for(range)
  Order.paid.where(created_at: range)
       .group_by_period(@filters.interval, :created_at).sum(:total)
end

<%= turbo_frame_tag "docs-filter-preview" do %>
  <%= railsui_chart_filters @filters, url: docs_charts_path, frame: "docs-filter-preview" %>

  <div class="mt-4 max-w-2xl">
    <%= railsui_metric_card(**@filter_metrics.first, chart_height: 140) %>
  </div>
<% end %>

The filter row submits as a GET form, so users can share the URL. With Turbo, changes submit in place and refresh the named frame.

Presets are 24h, 7d, 30d, 90d, 12m, and mtd. Pass select_class: and checkbox_class: when you want the controls to match your own form styles.

Empty, loading, and error

Plan for day one, loading, and failure states. Each state keeps the chart's footprint so the page stays still.

<%= railsui_chart_empty title: "No orders yet",
      description: "They will show up here as they come in.",
      height: 180 %>

<%= railsui_chart_skeleton height: 180, type: :area, label: "Loading revenue" %>

<%= railsui_chart_error title: "Couldn't load revenue",
      description: "The query timed out. Try a shorter range.",
      height: 180 %>

railsui_chart renders the empty state when data is blank. Pass empty: to set the message for that chart. Use railsui_chart_skeleton while data is in flight, and railsui_chart_error when the request fails. Loading skeletons align left by default; pass align: :center or align: :right when the surrounding layout calls for it.

Formatting

format: applies to the axis, tooltip, and hidden data table together.

<%= railsui_chart @revenue, format: :currency %>        <%# $52,000.00 %>
<%= railsui_chart @revenue, format: :short_currency %>  <%# $52K %>
<%= railsui_chart @rate,    format: :percentage %>      <%# 4.2% %>
<%= railsui_chart @views,   format: :human %>           <%# 1.2M %>
<%= railsui_chart @orders,  format: :number %>          <%# 1,204 %>

<%# Any other currency symbol %>
<%= railsui_chart @revenue, format: :currency, currency: "£" %>

:number is the default, so computed values do not leak long decimal strings into labels.

On a crowded date axis, edge_labels: true labels the first and last tick. The axis reads as a range and avoids rotated date labels.

Theming

Charts read appearance from CSS variables and geometry from Ruby. ApexCharts handles those values differently. Colors and type can arrive as strings. Geometry feeds arithmetic, so it needs numeric settings.

:root {
  --rui-chart-primary: #4f46e5;
  --rui-chart-secondary: #0ea5e9;
  --rui-chart-accent: #10b981;
  --rui-chart-muted: #94a3b8;
  --rui-chart-surface: #ffffff;
  --rui-chart-text: #64748b;
  --rui-chart-grid: rgba(148, 163, 184, 0.2);
  --rui-chart-positive: #047857;
  --rui-chart-negative: #b91c1c;

  /* Categorical slots, used in order for multi-series charts */
  --rui-chart-series-1: #6366f1;
  --rui-chart-series-2: #ea580c;
  /* ...through series-8 */

  /* Type read by the chart itself */
  --rui-chart-font-family: inherit;
  --rui-chart-font-size: 12px;
  --rui-chart-font-size-sm: 11px;

  /* Type for the parts drawn in HTML: tooltip, metric cards, tables */
  --rui-chart-text-size: 0.8125rem;
  --rui-chart-text-size-sm: 0.75rem;
  --rui-chart-value-size: 1.375rem;
}

/* Scoped: only the charts inside this card */
.dense-card {
  --rui-chart-font-size: 10px;
}

RailsuiCharts.configure do |config|
  config.default_height = 250
  config.default_currency = "$"

  config.geometry[:bar_radius] = 4
  config.geometry[:stroke_width] = 2
  config.geometry[:marker_size] = 0
  config.geometry[:marker_hover_size] = 6
end

/* Free */
.railsui-chart                  /* the chart element itself */
.railsui-chart-state            /* empty and error states */
.railsui-chart-skeleton         /* the loading placeholder */
.railsui-chart-tooltip          /* __head, __title, __rows, __key, __delta */
.railsui-chart-filters          /* __select, __checkbox */
.railsui-metric-card            /* __head, __value, __previous, __footer */
.railsui-metric                 /* the compact label / value / delta stack */
.railsui-metric-delta           /* --positive, --negative */
.railsui-small-multiples        /* .railsui-small-multiple, __title */

/* Pro */
.railsui-bar-list               /* __row, __track, __bar, __label, __value, __link */
.railsui-cohort                 /* __label, __cell, __cell--empty */
.railsui-tracker                /* __header, __label, __summary, __track */
.railsui-tracker__mark          /* --up, --degraded, --down, --none */
.railsui-chart-export__toolbar  /* __button, __icon */

Accessibility

Every chart includes a visually hidden data table. Pass accessible: false when the same values also appear in a visible table nearby.

Charts respect reduced motion. Tooltips use the same variables as the chart, so they match the page theme.

Passing raw ApexCharts options

Pass any ApexCharts option the helper does not expose. Rails UI merges it into the config before rendering.

<%= railsui_chart @revenue,
      type: :area,
      height: 320,
      legend: { show: true, position: "bottom" },
      plotOptions: { area: { fillTo: "end" } } %>

Rails UI Charts Pro

Charts Pro adds dashboard helpers for the questions SaaS products ask after the basic charts are covered. It builds on the open gem, so the helpers above keep working.

It covers four jobs:

Metric suites. A suite composes metric cards, expanded charts, export, breakdown tables, trackers, and timelines into one dashboard row.

Computed chart helpers. Waterfalls, cohorts, funnels, treemaps, ranked bar lists, and gap-filled time series handle the arithmetic and shaping that dashboards usually repeat by hand.

Analytics chart helpers. Candlesticks, box plots, heatmaps, and forecasts keep the Rails data shape close to the view while still producing ApexCharts-native series.

Compact status and comparison UI. Trackers, sparkline tables, and timelines handle the rows and strips that do not need a full chart.

Operational extras. Turbo Stream live updates plus PNG and CSV export.

Charts Pro is included with an active Rails UI Full Access subscription. See pricing for current subscription details.

Elsewhere

Every chart, rendered side by side

railsui_charts on GitHub

ApexCharts documentation