# Chartkick: One-Line Ruby Charts for Rails and Sinatra

> Chartkick is a Ruby gem that renders line, pie, column, bar, area, scatter, geo, and timeline charts with a single ERB helper call. It works with Chart.js by default and supports Google Charts and Highcharts as drop-in alternatives, with data fed directly from ActiveRecord queries.

**ankane/chartkick** — Create beautiful JavaScript charts with one line of Ruby

- Repository: https://github.com/ankane/chartkick
- Website: https://chartkick.com
- Stars: 6,530 · Forks: 562
- Language: Ruby
- License: MIT
- Published: 2026-09-22 · Updated: 2026-09-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/ankane-chartkick

## What Chartkick Does and Who Uses It

Chartkick is a Ruby gem that turns ActiveRecord query results directly into rendered JavaScript charts. The stated goal is to let a developer add a chart to a Rails view in one line without fighting the underlying charting library. It targets Ruby on Rails developers who need standard visualizations in admin interfaces, dashboards, or reporting views and want to stay within idiomatic Ruby without writing JavaScript.

The gem works with Rails (supporting importmap, bun, esbuild, rollup.js, Webpack, and Sprockets) and also with Sinatra and Padrino. The charting library defaults to Chart.js but can be switched to Google Charts or Highcharts. The README points to Blazer for teams building full admin dashboards and to Vega for advanced visualizations that go beyond the chart types Chartkick supports.

## Installing Chartkick in a Rails App

Add the gem to the Gemfile:

```ruby
gem "chartkick"
```

The JavaScript setup depends on which asset pipeline the application uses. For the Rails importmap default, add two pins to config/importmap.rb:

```ruby
pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"
```

Then import both in app/javascript/application.js:

```js
import "chartkick"
import "Chart.bundle"
```

For bun or yarn with esbuild, rollup.js, or Webpack, install both packages:

```sh
bun add chartkick chart.js
```

Then import the bundled version:

```js
import "chartkick/chart.js"
```

For Sprockets, add the require directives to app/assets/javascripts/application.js:

```js
//= require chartkick
//= require Chart.bundle
```

This sets up Chartkick with Chart.js. Switching to Google Charts or Highcharts requires different JavaScript setup steps documented in the additional charting libraries section of the README.

## Chart Types and ERB Helper Calls

Eight chart types are available as ERB helpers. Each helper accepts an ActiveRecord grouping result, an array, a hash, or a URL directly:

```erb
<%= line_chart User.group_by_day(:created_at).count %>
<%= pie_chart Goal.group(:name).count %>
<%= column_chart Task.group_by_hour_of_day(:created_at, format: "%l %P").count %>
<%= bar_chart Shirt.group(:size).sum(:price) %>
<%= area_chart Visit.group_by_minute(:created_at).maximum(:load_time) %>
<%= scatter_chart City.pluck(:size, :population) %>
```

Geo charts and timelines are available through Google Charts specifically. Timelines accept an array of label, start date, end date arrays. Multiple series are passed as an array of hashes with name and data keys.

For multiple series from grouped ActiveRecord queries, use the `group` scope alongside a time grouping:

```erb
<%= line_chart Feat.group(:goal_id).group_by_week(:created_at).count %>
```

## Loading Data from a URL for Async Charts

Chartkick accepts a URL in place of inline data. This is useful for large datasets or for charts that need to load after page render without blocking the initial response:

```erb
<%= line_chart completed_tasks_charts_path %>
```

The corresponding controller action renders the data as JSON:

```ruby
class ChartsController < ApplicationController
  def completed_tasks
    render json: Task.group_by_day(:completed_at).count
  end
end
```

For multiple series delivered from a URL, the query at the controller end should call `chart_json` to format the output correctly:

```ruby
render json: Task.group(:goal_id).group_by_day(:completed_at).count.chart_json
```

The `refresh:` option polls the URL on an interval in seconds, keeping a chart live without a page reload. This works for any chart type that accepts a URL.

## Per-Chart Options and the Global Config

Every chart helper accepts an options hash. Common options include id, width, height, min, max values, colors, stacked (for column and bar charts), curve (straight or curved lines), points (show or hide), legend and its position, and donut mode for pie charts. Currency and number formatting options include prefix, suffix, thousands and decimal separators, precision, round, and zeros.

The `library:` option passes values directly to the underlying Chart.js, Google Charts, or Highcharts configuration object, exposing the full API of whichever library is in use:

```erb
<%= line_chart data, library: {backgroundColor: "#eee"} %>
```

Global defaults for all charts in the application are set through an initializer:

```ruby
Chartkick.options = {
  height: "400px",
  colors: ["#b00", "#666"]
}
```

To move all chart JavaScript to the bottom of the page (useful for performance), configure a content_for block name via `Chartkick.options[:content_for] = :charts_js` and yield that block in the layout.

## Limitations: When Chartkick Is Not the Right Tool

Chartkick covers the common chart types. It does not provide heatmaps, treemaps, network graphs, Gantt charts, or complex multi-axis layouts natively. Teams needing those must either use the `library:` pass-through to write chart-library-specific configuration directly, switch to a lower-level wrapper like ankane/vega, or work outside Chartkick entirely.

Geo charts and timelines require Google Charts specifically; they are not available with Chart.js or Highcharts. This creates a dependency constraint: a project that standardizes on Chart.js for Chart.js-specific features (plugins, custom scales, custom interactions) cannot use geo charts without loading a second charting library.

The gem does not include its own data aggregation layer. Groupdate, Hightop, and ActiveMedian are listed as companion gems that handle common aggregation patterns. Teams without those gems need to construct the grouped data manually before passing it to a chart helper.

The repository has no GitHub releases. Changes land on the master branch directly, and the CHANGELOG.md in the repository is the only record of what changed between versions. Bundler pins to a specific gem version, so this is manageable, but there is no tagged release to reference on GitHub.

## Comparison with ankane/vega for Advanced Visualizations

The README explicitly recommends Vega (ankane/vega) for advanced visualizations. Vega is a Rails wrapper around the Vega-Lite grammar, a declarative specification language for statistical graphics. The difference in approach is significant: Chartkick provides named Ruby helpers for fixed chart types and delegates customization to the underlying library through the `library:` option; Vega exposes the full Vega-Lite JSON specification, which can express virtually any statistical chart type but requires writing a specification document rather than a one-line helper.

Chartkick is faster to add for standard charts against ActiveRecord data. Vega becomes the better choice when the visualization cannot be expressed as a line, column, bar, pie, area, or scatter chart, or when the team needs fine-grained control over marks, scales, projections, and interactions that would require substantial Chart.js configuration to replicate.

## Maintenance and MIT License

The last push was on 2026-08-15. The repository is not archived. Chartkick is released under the MIT license, permitting use, modification, and redistribution without restriction beyond attribution. There are no GitHub releases; the gem is published to RubyGems directly from the source. The CHANGELOG.md in the repository tracks version history.

Chartkick works with Rails 8 and importmap, as documented in the importmap setup section. The README notes that Chartkick can also be used with frameworks outside Rails: Padrino is mentioned alongside Sinatra as supported, with `yield_content` as the Padrino-specific replacement for `yield` in layout files.

## Conclusion

Chartkick is the right tool for Rails and Sinatra developers who need standard charts (line, pie, column, bar, area, scatter) wired directly to ActiveRecord queries without writing JavaScript. It is not suitable for teams who need highly custom visualizations, custom scales, or chart interactions beyond what Chart.js, Google Charts, and Highcharts provide through the `library:` pass-through option. Before adding Chartkick to a project using Webpacker or an older bundler, check the appropriate JS setup section in the README to avoid a misconfigured import.

## FAQ

### Does Chartkick include Chart.js, or do I need to install it separately?

You install Chart.js separately. For importmap, pin both chartkick and Chart.bundle in config/importmap.rb. For bun or yarn, run `bun add chartkick chart.js`. Chartkick provides the Ruby ERB helpers; Chart.js is the JavaScript rendering library it calls.

### Can Chartkick load chart data asynchronously from a controller action?

Yes. Pass a URL path to any chart helper instead of inline data. The chart renders a loading placeholder and fetches the data via XHR. The controller action renders the query result as JSON, and for multiple series, calls chart_json at the end of the query chain.

### Does Chartkick work with Rails 8 and importmap?

Yes. The README includes an importmap setup section. Add pins for chartkick and Chart.bundle in config/importmap.rb, then import both in app/javascript/application.js. This is the setup path for the default Rails 8 JavaScript configuration.

## Sources

- [ankane/chartkick on GitHub](https://github.com/ankane/chartkick)
- [Issues](https://github.com/ankane/chartkick/issues)
- [License: MIT](https://github.com/ankane/chartkick/blob/master/LICENSE)
- [Project website](https://chartkick.com)
- [README](https://github.com/ankane/chartkick/blob/master/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/ankane-chartkick