Need help with chartkick?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

ankane
5.9K Stars 539 Forks MIT License 462 Commits 6 Opened issues

Description

Create beautiful JavaScript charts with one line of Ruby

Services available

!
?

Need anything else?

Contributors list

Chartkick

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

See it in action

Chartkick 4.0 was recently released - see how to upgrade

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

:two_hearts: A perfect companion to Groupdate, Hightop, and ActiveMedian

Build Status

Quick Start

Add this line to your application’s Gemfile:

gem "chartkick"

For Rails 6 / Webpacker, run:

yarn add chartkick chart.js

And in

app/javascript/packs/application.js
, add:
import "chartkick/chart.js"

For Rails 5 / Sprockets, in

app/assets/javascripts/application.js
, add:
//= require chartkick
//= require Chart.bundle

This sets up Chartkick with Chart.js. For other charting libraries, see detailed instructions.

Charts

Line chart


Pie chart


Column chart


Bar chart


Area chart


Scatter chart


Geo chart - Google Charts


Timeline - Google Charts


Multiple series

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

or


Data

Data can be a hash, array, or URL.

Hash

 2, "2021-01-02" => 3}) %>

Array


URL

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


And in your controller, pass the data as JSON.

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

For multiple series, add

chart_json
at the end.
render json: Task.group(:goal_id).group_by_day(:completed_at).count.chart_json

Options

Id, width, and height


Min and max values


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


Colors


Stacked columns or bars


Discrete axis


Label (for single series)


Axis titles


Straight lines between points instead of a curve


Hide points


Show or hide legend


Specify legend position


Donut chart


Prefix, useful for currency - Chart.js, Highcharts


Suffix, useful for percentages - Chart.js, Highcharts


Set a thousands separator - Chart.js, Highcharts


Set a decimal separator - Chart.js, Highcharts


Set significant digits - Chart.js, Highcharts


Set rounding - Chart.js, Highcharts


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


Friendly byte sizes - Chart.js


Specify the message when data is loading


Specify the message when data is empty


Refresh data from a remote source every

n
seconds

You can pass options directly to the charting library with:


See the documentation for Chart.js, Google Charts, and Highcharts for more info.

To customize datasets in Chart.js, use:


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] = '
%{loading}
'

You capture the JavaScript in a content block with:

Chartkick.options[:content_for] = :charts_js

Then, in your layout, use:


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

Code

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


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.


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

Set the filename


Set the background color


Set title


Installation

Add this line to your application's Gemfile:

gem "chartkick"

Next, choose your charting library.

Chart.js

For Rails 6 / Webpacker, run:

yarn add chartkick chart.js

And in

app/javascript/packs/application.js
, add:
import "chartkick/chart.js"

For Rails 5 / Sprockets, in

app/assets/javascripts/application.js
, add:
//= require chartkick
//= require Chart.bundle

Google Charts

In your layout or views, add:


For Rails 6 / Webpacker, run:

yarn add chartkick

And in

app/javascript/packs/application.js
, add:
import "chartkick"

For Rails 5 / 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.

Highcharts

For Rails 6 / Webpacker, run:

yarn add chartkick highcharts

And in

app/javascript/packs/application.js
, add:
import "chartkick/highcharts"

For Rails 5 / 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

Sinatra and Padrino

Download chartkick.js and include it manually.


Then include the charting library.

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


Google Charts


Highcharts - download highcharts.js


Multiple Libraries

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

 

JavaScript API

Access a chart with:

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

Get the underlying chart object with:

chart.getChartObject()

You can also use:

chart.getElement()
chart.getData()
chart.getOptions()
chart.getAdapter()

Update the data with:

chart.updateData(newData)

You can also specify new options:

chart.setOptions(newOptions)
// or
chart.updateData(newData, newOptions)

Refresh the data from a remote source:

chart.refreshData()

Redraw the chart with:

chart.redraw()

Destroy the chart with:

chart.destroy()

Loop over charts with:

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

Content Security Policy (CSP)

Check out how to configure CSP

No Ruby? No Problem

Check out chartkick.js

Tutorials

Upgrading

4.0

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

If you use Webpacker, run:

yarn upgrade chartkick --latest

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

yarn upgrade chart.js --latest

And in

app/javascript/packs/application.js
, change:
require("chartkick")
require("chart.js")

to:

require("chartkick/chart.js")

History

View the changelog

Contributing

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

To get started with development:

git clone https://github.com/ankane/chartkick.git
cd chartkick
bundle install
bundle exec rake test

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.