The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Create beautiful Javascript charts with one line of Ruby
    Filed under 

    • 🔾73%Overall
    • 5,264
    • 5.4 days
    • 🕩498
    • 👥8


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

    See it in action

    :fire: For admin charts and dashboards, check out Blazer

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

    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:


    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.


    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 { |goal|
        {name:, data: goal.feats.group_by_week(:created_at).count}
    } %>


    <%= line_chart %>

    Say Goodbye To Timeouts

    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: "2018-01-01", xmax: "2019-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" %>

    Defer chart creation until after the page loads

    <%= line_chart data, defer: true %>

    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: "," %>

    Show a message when data is empty

    <%= line_chart data, messages: {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.

    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.


    Pass data as a hash or array

    <%= pie_chart({"Football" => 10, "Basketball" => 5}) %>
    <%= pie_chart [["Football", 10], ["Basketball", 5]] %>

    For multiple series, use the format

    <%= line_chart [
      {name: "Series A", data: series_a},
      {name: "Series B", data: series_b}
    ] %>

    Times can be a time or a string (strings are parsed)

    <%= line_chart({ => 5, "2013-05-07 00:00:00 UTC" => 7}) %>

    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" %>


    Add this line to your application's Gemfile:

    gem "chartkick"

    Next, choose your charting library.

    In the instructions below, application.js must be included before the charts in your views, unless using the :content_for option.


    For Rails 6 / Webpacker, run:

    yarn add chartkick chart.js

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


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

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

    Google Charts

    In your layout or views, add:

    <%= javascript_include_tag "" %>

    For Rails 6 / Webpacker, run:

    yarn add chartkick

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


    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.


    For Rails 6 / Webpacker, run:

    yarn add chartkick highcharts

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


    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.

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

    Multiple Libraries

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

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

    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:


    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




    Breaking changes

    • Removed support for Rails < 4.2
    • Removed chartkick.js from asset precompile (no longer needed)
    • Removed xtype option - numeric axes are automatically detected
    • Removed window.Chartkick = {...} way to set config - use Chartkick.configure instead
    • Removed support for the Google Charts jsapi loader - use loader.js instead


    Breaking changes

    • Chart.js is now the default adapter if multiple are loaded - yay open source!
    • Axis types are automatically detected - no need for discrete: true
    • Better date support - dates are no longer treated as UTC


    Chartkick uses iso8601.js to parse dates and times.


    View the changelog

    Chartkick follows Semantic Versioning


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

    Show All