Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
280 lines (185 sloc) 5.04 KB

Vue Chartkick

Create beautiful charts with one line in Vue.js

See it in action

Supports Chart.js, Google Charts, and Highcharts

Charts

Line chart

<line-chart :data="{'2013-02-10 00:00:00 -0800': 11, '2013-02-11 00:00:00 -0800': 6}"></line-chart>

Pie chart

<pie-chart :data="[['Blueberry', 44], ['Strawberry', 23]]"></pie-chart>

Column chart

<column-chart :data="[['Sun', 32], ['Mon', 46], ['Tue', 28]]"></column-chart>

Bar chart

<bar-chart :data="[['Work', 32], ['Play', 1492]]"></bar-chart>

Area chart

<area-chart :data="{'2013-02-10 00:00:00 -0800': 11, '2013-02-11 00:00:00 -0800': 6}"></area-chart>

Scatter chart

<scatter-chart :data="[[174.0, 80.0], [176.5, 82.3], [180.3, 73.6]]"></scatter-chart>

Geo chart - Google Charts

<geo-chart :data="[['United States', 44], ['Germany', 23], ['Brazil', 22]]"></geo-chart>

Timeline - Google Charts

<timeline :data="[['Washington', '1789-04-29', '1797-03-03'],['Adams', '1797-03-03', '1801-03-03']]"></timeline>

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}}
];

// and
<line-chart :data="data" />

Say Goodbye To Timeouts

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

<line-chart data="/stocks"></line-chart>

Options

Id, width, and height

<line-chart id="users-chart" width="800px" height="500px"></line-chart>

Min and max values

<line-chart :min="1000" :max="5000"></line-chart>

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

Colors

<line-chart :colors="['#b00', '#666']"></line-chart>

Stacked columns or bars

<column-chart :stacked="true"></column-chart>

Discrete axis

<line-chart :discrete="true"></line-chart>

Label (for single series)

<line-chart label="Value"></line-chart>

Axis titles

<line-chart xtitle="Time" ytitle="Population"></line-chart>

Straight lines between points instead of a curve

<line-chart :curve="false"></line-chart>

Show or hide legend

<line-chart :legend="true"></line-chart>

Specify legend position

<line-chart legend="bottom"></line-chart>

Donut chart

<pie-chart :donut="true"></pie-chart>

Refresh data from a remote source every n seconds

<line-chart :refresh="60"></line-chart>

You can pass options directly to the charting library with:

<line-chart :library="{backgroundColor: '#eee'}"></line-chart>

See the documentation for Google Charts, Highcharts, and Chart.js for more info.

Data

Pass data as an array or object

<pie-chart :data="{'Blueberry': 44, 'Strawberry': 23}"></pie-chart>
<pie-chart :data="[['Blueberry', 44], ['Strawberry', 23]]"></pie-chart>

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

<line-chart :data="[[new Date(), 5], [1368174456, 4], ['2013-05-07 00:00:00 UTC', 7]]"></line-chart>

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 :download="true"></line-chart>

Set the filename

<line-chart download="boom"></line-chart>

Note: Safari will open the image in a new window instead of downloading.

Installation

Run

npm install chartkick vue-chartkick --save

Chart.js

Run

npm install chart.js --save

And add

window.Chart = require('chart.js');

Google Charts

Include

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

Highcharts

Run

npm install highcharts --save

And add

window.Highcharts = require('highcharts');

Without NPM

Include the charting library

<script src="https://unpkg.com/chart.js@2.4.0/dist/Chart.bundle.js"></script>

And then the Chartkick libraries

<script src="https://unpkg.com/chartkick@2.2.1"></script>
<script src="dist/vue-chartkick.js"></script>

Example

<div id="app">
  <line-chart :data="chartData"></line-chart>
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      chartData: [["Jan", 4], ["Feb", 2], ["Mar", 10], ["Apr", 5], ["May", 3]]
    }
  })
</script>

Contributing

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