Chartkick.js
Create beautiful charts with one line of JavaScript
Supports Chart.js, Google Charts, and Highcharts
Also available for React, Vue.js, Ruby, Python, Elixir, and Clojure
Usage
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})
Scatter chart
new Chartkick.ScatterChart("chart-1", [[174.0, 80.0], [176.5, 82.3], [180.3, 73.6]])
Geo chart - Google Charts
new Chartkick.GeoChart("chart-1", [["United States", 44], ["Germany", 23], ["Brazil", 22]])
Timeline - Google Charts
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)
Multiple series stacked and grouped - Chart.js 2.5+ or Highcharts
data = [
{name: "Apple", data: {"Tuesday": 3, "Friday": 4}, stack: "fruit"},
{name: "Pear", data: {"Tuesday": 1, "Friday": 8}, stack: "fruit"},
{name: "Carrot", data: {"Tuesday": 3, "Friday": 4}, stack: "vegetable"},
{name: "Beet", data: {"Tuesday": 1, "Friday": 8}, stack: "vegetable"}
]
new Chartkick.BarChart("chart-1", data, {stacked: true})
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")
Options
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.
Colors
new Chartkick.LineChart("chart-1", data, {colors: ["#b00", "#666"]})
Stacked columns or bars
new Chartkick.ColumnChart("chart-1", data, {stacked: true})
Discrete axis
new Chartkick.LineChart("chart-1", data, {discrete: true})
Label (for single series)
new Chartkick.LineChart("chart-1", data, {label: "Value"})
Axis titles
new Chartkick.LineChart("chart-1", data, {xtitle: "Time", ytitle: "Population"})
Straight lines between points instead of a curve
new Chartkick.LineChart("chart-1", data, {curve: false})
Hide points
new Chartkick.LineChart("chart-1", data, {points: false})
Show or hide legend
new Chartkick.LineChart("chart-1", data, {legend: true})
Specify legend position
new Chartkick.LineChart("chart-1", data, {legend: "bottom"})
Donut chart
new Chartkick.PieChart("chart-1", data, {donut: true})
Refresh data from a remote source every n
seconds
new Chartkick.LineChart("chart-1", url, {refresh: 60})
You can pass options directly to the charting library with:
new Chartkick.LineChart("chart-1", data, {library: {backgroundColor: "pink"}})
See the documentation for Chart.js, Google Charts, and Highcharts for more info.
Global Options
To set options for all of your charts, use:
Chartkick.options = {
colors: ["#b00", "#666"]
}
Data
Pass data as an array or object
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]])
Download Charts
Chart.js only
Give users the ability to download charts. It all happens in the browser - no server-side code needed.
new Chartkick.LineChart("chart-1", data, {download: true})
Set the filename
new Chartkick.LineChart("chart-1", data, {download: "boom"})
Note: Safari will open the image in a new window instead of downloading.
Installation
Download directly, or with npm or Bower:
npm install chartkick
# or
bower install chartkick
For Chart.js (works with 2.1+), download the bundle and use:
<script src="/path/to/Chart.bundle.js"></script>
<script src="chartkick.js"></script>
For Google Charts, use:
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="chartkick.js"></script>
For Highcharts (works with 2.1+), download it and use:
<script src="/path/to/highcharts.js"></script>
<script src="chartkick.js"></script>
Localization
To specify a language for Google Charts, add:
Chartkick.configure({language: "de"})
after the JavaScript files and before your charts.
Adapter
If more than one charting library is loaded, choose between them with:
new Chartkick.LineChart("chart-1", data, {adapter: "google"}) // or highcharts
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()
Loop over charts with:
Chartkick.eachChart( function(chart) {
// do something
})
Custom Adapters
Note: This feature is experimental.
Add your own custom adapter with:
var CustomAdapter = new function () {
this.name = "custom";
this.renderLineChart = function (chart) {
chart.getElement().innerHTML = "Hi";
};
};
Chartkick.adapters.unshift(CustomAdapter);
Add a new chart type with:
var CustomAdapter = new function () {
this.renderCustomChart = function (chart) {
chart.getElement().innerHTML = "Hi";
};
};
Chartkick.CustomChart = function (element, dataSource, options) {
Chartkick.createChart("CustomChart", this, element, dataSource, options);
};
Examples
To run the files in the examples
directory, you'll need a web server. Run:
python -m SimpleHTTPServer
and visit http://localhost:8000/examples/
Upgrading
2.0
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
Credits
Chartkick uses iso8601.js to parse dates and times.
History
View the changelog
Chartkick.js follows Semantic Versioning
Contributing
Everyone is encouraged to help improve this project. Here are a few ways you can help:
- Report bugs
- Fix bugs and submit pull requests
- Write, clarify, or fix documentation
- Suggest or add new features
If you’re looking for ideas, try here.
To get started with development and testing:
git clone https://github.com/ankane/chartkick.js.git
cd chartkick.js
python -m SimpleHTTPServer # starts a web server on port 8000
And visit http://localhost:8000/examples in your browser.