Vue Chartkick

Create beautiful JavaScript charts with one line of Vue.

View demo Download Source

Charts

Line chart

<line-chart :data="{'2017-01-01': 11, '2017-01-02': 6}"></line-chart>
Vue

Pie chart

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

Column chart

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

Bar chart

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

Area chart

<area-chart :data="{'2017-01-01': 11, '2017-01-02': 6}"></area-chart>
Vue

Scatter chart

<scatter-chart :data="[[174.0, 80.0], [176.5, 82.3]]" xtitle="Size" ytitle="Population"></scatter-chart>
Vue

Geo chart - Google Charts

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

Timeline - Google Charts

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

Multiple series

data = [
  {name: 'Workout', data: {'2017-01-01': 3, '2017-01-02': 4}},
  {name: 'Call parents', data: {'2017-01-01': 5, '2017-01-02': 3}}
];

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

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>
Vue

Options

Id, width, and height

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

Min and max values

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

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>
Vue

Stacked columns or bars

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

Discrete axis

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

Label (for single series)

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

Axis titles

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

Straight lines between points instead of a curve

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

Show or hide legend

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

Specify legend position

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

Donut chart

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

Prefix, useful for currency - Chart.js, Highcharts

<line-chart prefix="$"></line-chart>
Vue

Suffix, useful for percentages - Chart.js, Highcharts

<line-chart suffix="%"></line-chart>
Vue

Set a thousands separator - Chart.js, Highcharts

<line-chart thousands=","></line-chart>
Vue

Set a decimal separator - Chart.js, Highcharts

<line-chart decimal=","></line-chart>
Vue

Show a message when data is empty

<line-chart :messages="{empty: 'No data'}"></line-chart>
Vue

Refresh data from a remote source every n seconds

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

You can pass options directly to the charting library with:

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

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>
Vue

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

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

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>
Vue

Set the filename

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

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

Installation

Run

yarn add chartkick vue-chartkick
Sh

Chart.js

Run

yarn add chart.js
Sh

And add

import Chartkick from 'chartkick'
import VueChartkick from 'vue-chartkick'
import Chart from 'chart.js'

Vue.use(VueChartkick, { Chartkick })
Es6

Google Charts

Add

import Chartkick from 'chartkick'
import VueChartkick from 'vue-chartkick'

Vue.use(VueChartkick, { Chartkick })
Es6

And include on the page

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

Highcharts

Run

yarn add highcharts
Sh

And add

import Chartkick from 'chartkick'
import VueChartkick from 'vue-chartkick'
import Highcharts from 'highcharts'

window.Highcharts = Highcharts
Vue.use(VueChartkick, { Chartkick })
Es6

Without Yarn or NPM

Include the charting library

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

And then the Chartkick libraries

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

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>
Vue

GitHub

ankane/vue-chartkick

75173

Create beautiful JavaScript charts with one line of Vue — Read More

https://chartkick.com/vue

Latest commit to the master branch on 11-12-2024
Download as zip