Create beautiful Javascript charts with minimal code
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 368 commits behind ankane:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Create beautiful Javascript charts with minimal code.

See it in action

Supports Google Charts and Highcharts and works with most browsers (including IE 6)

Server-side Integration

I would love to see this implemented in other languages too!!


Create a div for the chart

<div id="chart-1" style="height: 300px;"></div>

Line chart

new Chartkick.LineChart("chart-1", {"2013-02-10 00:00:00 -0800": 11, "2013-02-11 00:00:00 -0800": 6});

Pie chart

new Chartkick.PieChart("chart-1", [["Blueberry", 44],["Strawberry", 23]]);

Column chart

new Chartkick.ColumnChart("chart-1", [["Sun", 32],["Mon", 46],["Tue", 28]]);

Bar chart

new Chartkick.BarChart("chart-1", [["Work", 32],["Play", 1492]]);

Area chart

new Chartkick.AreaChart("chart-1", {"2013-02-10 00:00:00 -0800": 11, "2013-02-11 00:00:00 -0800": 6});

Geo chart

new Chartkick.GeoChart("chart-1", [["United States",44],["Germany",23],["Brazil",22]]);


new Chartkick.Timeline("chart-1", [["Washington", "1789-04-29", "1797-03-03"],["Adams", "1797-03-03", "1801-03-03"]]);

Multiple series

data = [
  {"name":"Workout", "data": {"2013-02-10 00:00:00 -0800": 3, "2013-02-17 00:00:00 -0800": 4}},
  {"name":"Call parents", "data": {"2013-02-10 00:00:00 -0800": 5, "2013-02-17 00:00:00 -0800": 3}}
new Chartkick.LineChart("chart-1", data);

Say Goodbye To Timeouts

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

new Chartkick.LineChart("chart-1", "/stocks");

Note: This feature requires jQuery or Zepto at the moment.


Min and max values

new Chartkick.LineChart("chart-1", data, {"min": 1000, "max": 5000});

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


new Chartkick.LineChart("chart-1", data, {"colors": ["pink", "#999"]});

Stacked columns or bars

new Chartkick.ColumnChart("chart-1", data, {"stacked": true});

Discrete axis

new Chartkick.LineChart("chart-1", data, {"discrete": true});

You can pass options directly to the charting library with:

new Chartkick.LineChart("chart-1", data, {"library": {"backgroundColor": "pink"}});


Pass data as a Hash or Array

new Chartkick.PieChart("chart-1", {"Blueberry": 44, "Strawberry": 23});
new Chartkick.PieChart("chart-1", [["Blueberry", 44],["Strawberry", 23]]);

Times can be a Date, a timestamp, or a string (strings are parsed)

new Chartkick.LineChart("chart-1", [[new Date(), 5],[1368174456, 4],["2013-05-07 00:00:00 UTC", 7]]);


For Google Charts, use:

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

If you prefer Highcharts, use:

<script src="/path/to/highcharts.js"></script>
<script src="chartkick.js"></script>

Works with Highcharts 2.1+


To specify a language for Google Charts, add:

  var Chartkick = {"language": "de"};

before the javascript files.


If both Google Charts and Highcharts are loaded, choose between them with:

new Chartkick.LineChart("chart-1", data, {"adapter": "google"}); // or highcharts


To run the files in the examples directory, you'll need a web server. Run:

python -m SimpleHTTPServer

and visit http://localhost:8000/examples/


Chartkick uses iso8601.js to parse dates and times.


View the changelog

Chartkick.js follows Semantic Versioning


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