Create beautiful Javascript charts with minimal code. Demo!

Supports Chart.js, Google Charts, and Highcharts

Works with Django, Flask/Jinja2 and most browsers (including IE 6). Also available in Ruby and pure JavaScript

Line chart: :

{% line_chart data %}

Pie chart: :

{% pie_chart data with id='chart-1' height='400px' %}

Column chart: :

{% column_chart data with min=400 max=1000 %}

Bar chart: :

{% bar_chart data %}

Area chart: :

{% area_chart data %}

Scatter chart: :

{% scatter_chart data %}

Data can be a dictionary or a list: :

{'Chrome': 52.9, 'Opera': 1.6, 'Firefox': 27.7}

[['Chrome', 52.9], ['Firefox', 27.7], ['Opera', 1.6]]

For multiple series: :

[{'data': [['2013-04-01 00:00:00 UTC', 52.9], ['2013-05-01 00:00:00 UTC', 50.7]], 'name': 'Chrome'},
 {'data': [['2013-04-01 00:00:00 UTC', 27.7], ['2013-05-01 00:00:00 UTC', 25.9]], 'name': 'Firefox'}]

Charting library options can be passed through the library variable: :

{% column_chart data with library={"title":"Super chart","width":"400px"} %}

Or using chartkick.json file. Chartkick tries to locate chartkick.json file in template path and match options by id.

Install chartkick: :

$ pip install chartkick

• Django: Add chartkick to INSTALLED_APPS and STATICFILES_DIRS: :

  INSTALLED_APPS = (
      'chartkick',
  )
  
  import chartkick
  STATICFILES_DIRS = (
      chartkick.js(),
  )

• Flask: Add chartkick to jinja_env and static_folder: :

  import chartkick
  ck = Blueprint('ck_page', __name__, static_folder=chartkick.js(), static_url_path='/static')
  app.register_blueprint(ck, url_prefix='/ck')
  app.jinja_env.add_extension("chartkick.ext.charts")

Load JS scripts:

• Chart.js :

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
  <script src="/ck/static/chartkick.js"></script>

• Google Charts :

  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script src="/ck/static/chartkick.js"></script>

• Highcharts :

  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="/ck/static/chartkick.js"></script>