Create beautiful JavaScript charts with one line of Ruby
Alternatives To Chartkick
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Chart.js61,88393918 hours ago95July 26, 2023308mitJavaScript
Simple HTML5 Charts using the <canvas> tag
Echarts56,415414 hours ago12January 27, 20212,382apache-2.0TypeScript
Apache ECharts is a powerful, interactive charting and data visualization library for browser
Plotly.js15,988718247a day ago239July 25, 20231,501mitJavaScript
Open-source JavaScript charting library behind Plotly and Dash
Nvd37,187933926 months ago18August 24, 2017568otherJavaScript
A reusable charting library written in d3.js
Lightweight Charts6,91164316 hours ago31March 21, 2023100apache-2.0TypeScript
Performant financial charts built with HTML5 canvas
Chartkick6,1592,936532 days ago74July 24, 20236mitRuby
Create beautiful JavaScript charts with one line of Ruby
Bizcharts6,0156166847 months ago238November 30, 2022333mitTypeScript
Powerful data visualization library based on G2 and React.
Awesome D34,945
8 months ago3other
A list of D3 libraries, plugins and utilities
Ngx Charts4,2481,1033653 days ago89June 14, 2023808mitTypeScript
:bar_chart: Declarative Charting Framework for Angular
1115 years ago77September 30, 201710otherObjective-C
iOS-based charting library for both line and bar graphs.
Alternatives To Chartkick
Select To Compare

Alternative Project Comparisons


Create beautiful JavaScript charts with one line of Ruby. No more fighting with charting libraries!

See it in action

Chartkick 5.0 was recently released - see how to upgrade

🔥 For admin charts and dashboards, check out Blazer, and for advanced visualizations, check out Vega

💕 A perfect companion to Groupdate, Hightop, and ActiveMedian

Build Status

Quick Start

Add this line to your application’s Gemfile:

gem "chartkick"

Then follow the instructions for your JavaScript setup:

This sets up Chartkick with Chart.js. For other charting libraries and frameworks, see these instructions.


In config/importmap.rb, add:

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

And in app/javascript/application.js, add:

import "chartkick"
import "Chart.bundle"

esbuild, rollup.js, or Webpack


yarn add chartkick chart.js

And in app/javascript/application.js, add:

import "chartkick/chart.js"

Note: For rollup.js, this requires format: "iife" in rollup.config.js.



yarn add chartkick chart.js

And in app/javascript/packs/application.js, add:

import "chartkick/chart.js"


In app/assets/javascripts/application.js, add:

//= require chartkick
//= require Chart.bundle


Line chart

<%= line_chart User.group_by_day(:created_at).count %>

Pie chart

<%= pie_chart %>

Column chart

<%= column_chart Task.group_by_hour_of_day(:created_at, format: "%l %P").count %>

Bar chart

<%= bar_chart %>

Area chart

<%= area_chart Visit.group_by_minute(:created_at).maximum(:load_time) %>

Scatter chart

<%= scatter_chart City.pluck(:size, :population) %>

Geo chart - Google Charts

<%= geo_chart %>

Timeline - Google Charts

<%= timeline [
  ["Washington", "1789-04-29", "1797-03-03"],
  ["Adams", "1797-03-03", "1801-03-03"],
  ["Jefferson", "1801-03-03", "1809-03-03"]
] %>

Multiple series

<%= line_chart [
  {name: "Workout", data: {"2021-01-01" => 3, "2021-01-02" => 4}},
  {name: "Call parents", data: {"2021-01-01" => 5, "2021-01-02" => 3}}
] %>


<%= line_chart %>


Data can be a hash, array, or URL.


<%= line_chart({"2021-01-01" => 2, "2021-01-02" => 3}) %>


<%= line_chart [["2021-01-01", 2], ["2021-01-02", 3]] %>


Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.

<%= line_chart completed_tasks_charts_path %>

And in your controller, pass the data as JSON.

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

For multiple series, add chart_json at the end.

render json:


Id, width, and height

<%= line_chart data, id: "users-chart", width: "800px", height: "500px" %>

Min and max values

<%= line_chart data, min: 1000, max: 5000 %>

min defaults to 0 for charts with non-negative values. Use nil to let the charting library decide.

Min and max for x-axis - Chart.js

<%= line_chart data, xmin: "2021-01-01", xmax: "2022-01-01" %>


<%= line_chart data, colors: ["#b00", "#666"] %>

Stacked columns or bars

<%= column_chart data, stacked: true %>

Discrete axis

<%= line_chart data, discrete: true %>

Label (for single series)

<%= line_chart data, label: "Value" %>

Axis titles

<%= line_chart data, xtitle: "Time", ytitle: "Population" %>

Straight lines between points instead of a curve

<%= line_chart data, curve: false %>

Hide points

<%= line_chart data, points: false %>

Show or hide legend

<%= line_chart data, legend: false %>

Specify legend position

<%= line_chart data, legend: "bottom" %>

Donut chart

<%= pie_chart data, donut: true %>

Prefix, useful for currency - Chart.js, Highcharts

<%= line_chart data, prefix: "$" %>

Suffix, useful for percentages - Chart.js, Highcharts

<%= line_chart data, suffix: "%" %>

Set a thousands separator - Chart.js, Highcharts

<%= line_chart data, thousands: "," %>

Set a decimal separator - Chart.js, Highcharts

<%= line_chart data, decimal: "," %>

Set significant digits - Chart.js, Highcharts

<%= line_chart data, precision: 3 %>

Set rounding - Chart.js, Highcharts

<%= line_chart data, round: 2 %>

Show insignificant zeros, useful for currency - Chart.js, Highcharts

<%= line_chart data, round: 2, zeros: true %>

Friendly byte sizes - Chart.js

<%= line_chart data, bytes: true %>

Specify the message when data is loading

<%= line_chart data, loading: "Loading..." %>

Specify the message when data is empty

<%= line_chart data, empty: "No data" %>

Refresh data from a remote source every n seconds

<%= line_chart url, refresh: 60 %>

You can pass options directly to the charting library with:

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

See the documentation for Chart.js, Google Charts, and Highcharts for more info. For Chart.js plugins, check out this guide.

To customize datasets in Chart.js, use:

<%= line_chart data, dataset: {borderWidth: 10} %>

You can pass this option to individual series as well.

Global Options

To set options for all of your charts, create an initializer config/initializers/chartkick.rb with:

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

Customize the html

Chartkick.options[:html] = '<div id="%{id}" style="height: %{height};">%{loading}</div>'

You capture the JavaScript in a content block with:

Chartkick.options[:content_for] = :charts_js

Then, in your layout, use:

<%= yield :charts_js %>

For Padrino, use yield_content instead of yield.

This is great for including all of your JavaScript at the bottom of the page.

Multiple Series

You can pass a few options with a series:

  • name
  • data
  • color
  • dataset - Chart.js only
  • points - Chart.js only
  • curve - Chart.js only


If you want to use the charting library directly, get the code with:

<%= line_chart data, code: true %>

The code will be logged to the JavaScript console. JavaScript functions cannot be logged, so it may not be identical.

Download Charts

Chart.js only

Give users the ability to download charts. It all happens in the browser - no server-side code needed.

<%= line_chart data, download: true %>

Safari will open the image in a new window instead of downloading.

Set the filename

<%= line_chart data, download: {filename: "boom"} %>

Set the background color

<%= line_chart data, download: {background: "#ffffff"} %>

Set title

<%= line_chart data, title: "Awesome chart" %>

Additional Charting Libraries

Google Charts

In your layout or views, add:

<%= javascript_include_tag "" %>

For Importmap (Rails 7 default), in config/importmap.rb, add:

pin "chartkick", to: "chartkick.js"

And in app/javascript/application.js, add:

import "chartkick"

For Webpacker (Rails 6 default), run:

yarn add chartkick

And in app/javascript/packs/application.js, add:

import "chartkick"

For Sprockets, in app/assets/javascripts/application.js, add:

//= require chartkick

To specify a language or Google Maps API key, use:

Chartkick.configure({language: "de", mapsApiKey: "..."})

before your charts.


For Importmap (Rails 7 default), run:

bin/importmap pin highcharts --download

And in config/importmap.rb, add:

pin "chartkick", to: "chartkick.js"

And in app/javascript/application.js, add:

import "chartkick"
import Highcharts from "highcharts"

window.Highcharts = Highcharts

For Webpacker (Rails 6 default), run:

yarn add chartkick highcharts

And in app/javascript/packs/application.js, add:

import "chartkick/highcharts"

For Sprockets, download highcharts.js into vendor/assets/javascripts (or use yarn add highcharts in Rails 5.1+), and in app/assets/javascripts/application.js, add:

//= require chartkick
//= require highcharts

Multiple Libraries

If more than one charting library is loaded, choose between them with:

<%= line_chart data, adapter: "google" %> <!-- or highcharts or chartjs -->

Sinatra and Padrino

Download chartkick.js and include it manually.

<script src="chartkick.js"></script>

Then include the charting library.

Chart.js - download Chart.js and the date-fns adapter bundle

<script src="chart.js"></script>
<script src="chartjs-adapter-date-fns.bundle.js"></script>

Google Charts

<script src=""></script>

Highcharts - download highcharts.js

<script src="highcharts.js"></script>

JavaScript API

Access a chart with:

var chart = Chartkick.charts["chart-id"]

Get the underlying chart object with:


You can also use:


Update the data with:


You can also specify new options:

// or
chart.updateData(newData, newOptions)

Refresh the data from a remote source:


Redraw the chart with:


Destroy the chart with:


Loop over charts with:

Chartkick.eachChart(function (chart) {
  // do something

Content Security Policy (CSP)

Check out how to configure CSP




If you use Importmap or Sprockets, update the gem and you’re good to go!

If you use esbuild, Webpack, or Webpacker, run:

yarn upgrade chartkick --latest

If you use Chart.js with esbuild, Webpack, or Webpacker, also run:

yarn upgrade chart.js --latest


View the changelog


Everyone is encouraged to help improve this project. Here are a few ways you can help:

To get started with development:

git clone
cd chartkick
bundle install
bundle exec rake test
Popular Charting Projects
Popular Chart Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Ruby On Rails
Google Charts