Chartkick Documentation

To use Highcharts with Importmap, run: bin/importmap pin highcharts --download

Then, in app/javascript/application.js:

import "chartkick"
import Highcharts from "highcharts"

window.Highcharts = Highcharts

For Bun/Webpack/esbuild, install both packages and use the specific adapter import:

import "chartkick/highcharts"

If you are using Rails Importmaps, add the following pins to config/importmap.rb:

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

Then, import them in your app/javascript/application.js:

import "chartkick"
import "Chart.bundle"

For modern JavaScript bundlers, install chartkick and chart.js via your package manager:

bun add chartkick chart.js
# or
yarn add chartkick chart.js

Then, import the Chart.js adapter in app/javascript/application.js:

import "chartkick/chart.js"

To use Chart.js global plugins with modern JS bundlers:

1. Install the plugin via NPM.
2. Import both Chart from chart.js and the plugin.
3. Register the plugin using Chart.register().

import { Chart } from "chart.js"
import annotationPlugin from "chartjs-plugin-annotation"

Chart.register(annotationPlugin)

Chartkick accepts three main data formats:

1. Hash: {"2026-01-01" => 2, "2026-01-02" => 3}
2. Array: [["2026-01-01", 2], ["2026-01-02", 3]]
3. URL: Pass a path to a controller action that returns JSON. This is recommended for large datasets to prevent timeouts.

When using a URL, ensure your controller returns JSON. For multiple series via URL, append .chart_json to your data query in the controller.

# Controller example for URL data
class ChartsController < ApplicationController
  def completed_tasks
    render json: Task.group_by_day(:completed_at).count
  end
end

# View example using URL
<%= line_chart completed_tasks_charts_path %>

Chartkick currently requires unsafe-inline styles to be enabled for charts to function. In Rails 5.2+, you can configure CSP and enable automatic nonce generation in config/initializers/content_security_policy.rb.

To allow charts to work on specific actions, use the content_security_policy controller method to enable :unsafe_inline for style_src.

# config/initializers/content_security_policy.rb
Rails.application.config.content_security_policy do |policy|
  policy.script_src  :self
  policy.style_src   :self
end

Rails.application.config.content_security_policy_nonce_generator = -> request { SecureRandom.base64(16) }

# In your controller to enable styles for charts
class ChartsController < ApplicationController
  content_security_policy only: :index do |policy|
    policy.style_src :self, :unsafe_inline
  end
end

To use Chart.js global plugins with Sprockets:

1. Download the UMD version of the plugin to vendor/assets/javascripts.
2. Change the file extension from .cjs to .js.
3. Require the plugin in your asset manifest or JavaScript file.

//= require chartjs-plugin-annotation

For applications using Sprockets, add the following requirements to app/assets/javascripts/application.js:

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

To use Chartkick in a Ruby on Rails application, first add the gem to your Gemfile:

gem "chartkick"

Then, follow the setup instructions specific to your JavaScript bundler (Importmap, Bun/esbuild/Webpack, or Sprockets) to include the necessary JavaScript assets.

If you are using the secure_headers gem, configure your default CSP in config/initializers/secure_headers.rb.

Because Chartkick requires unsafe-inline styles, you should create a named CSP configuration (e.g., :charts) that includes :unsafe_inline in the style_src, and then apply that named configuration to the specific controller actions where charts are rendered.

# config/initializers/secure_headers.rb
SecureHeaders::Configuration.default do |config|
  config.csp = {
    default_src: %w('none'),
    script_src: %w('self'),
    style_src: %w('self')
  }
end

SecureHeaders::Configuration.named_append(:charts) do |request|
  {style_src: %w('unsafe-inline')}
end

# In your controller
class ChartsController < ApplicationController
  def index
    use_content_security_policy_named_append(:charts)
  end
end

To use Chart.js global plugins (like the annotation plugin) with Importmaps:

1. Download the UMD version of the plugin to vendor/javascript.
2. Change the file extension from .cjs to .js.
3. Pin the plugin in config/importmap.rb.
4. Import the plugin in your JavaScript code.

import "chartjs-plugin-annotation"

To use Google Charts, include the Google loader in your layout:

<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>

Before your charts are rendered, you can configure the language or Google Maps API key using Chartkick.configure in your JavaScript:

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