Create Beautiful Charts With Vue.js – Vue Chartkick

Create Beautiful Charts With Vue.js – Vue Chartkick

Vue Chartkick is a lightweight Vue.js component for creating beautiful charts using Chart.js, Google Charts, and Highcharts.

Vue Chartkick

Create beautiful JavaScript charts with one line of Vue

See it in action

Supports Chart.js, Google Charts, and Highcharts

Quick Start


yarn add vue-chartkick chart.js

And add

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

Vue.use(VueChartkick, {adapter: Chart})

This sets up Chartkick with Chart.js. For other charting libraries, see detailed instructions.


Line chart

<line-chart :data="{'2017-01-01': 11, '2017-01-02': 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="{'2017-01-01': 11, '2017-01-02': 6}"></area-chart>

Scatter chart

<scatter-chart :data="[[174.0, 80.0], [176.5, 82.3]]" xtitle="Size" ytitle="Population"></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: {'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" />

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>


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.


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

Prefix, useful for currency - Chart.js, Highcharts

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

Suffix, useful for percentages - Chart.js, Highcharts

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

Set a thousands separator - Chart.js, Highcharts

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

Set a decimal separator - Chart.js, Highcharts

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

Show a message when data is empty

<line-chart :messages="{empty: 'No data'}"></line-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.

To customize datasets in Chart.js, use:

<line-chart :dataset="{borderWidth: 10}"></line-chart>

You can pass this option to individual series as well.

Use dynamic components to make the chart type dynamic:

<component is="column-chart"></component>


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 or a string (strings are parsed)

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

Multiple Series

You can pass a few options with a series:

  • name
  • data
  • color
  • dataset - Chart.js only

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.




yarn add vue-chartkick chart.js

And add

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

Vue.use(VueChartkick, {adapter: Chart})

Google Charts


yarn add vue-chartkick

And add

import Vue from 'vue'
import VueChartkick from 'vue-chartkick'


And include on the page

<script src=""></script>



yarn add vue-chartkick highcharts

And add

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

Vue.use(VueChartkick, {adapter: Highcharts})

No Package Manager

Include the charting library and the Chartkick library

<script src="[email protected]/dist/Chart.bundle.js"></script>
<script src="[email protected]"></script>

Multiple Libraries [master]

If more than one charting library is loaded, choose between them with:

<line-chart adapter="google"></line-chart>

Options are google, highcharts, and chartjs


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

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


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

To get started with development, run:

git clone
cd vue-chartkick
yarn build

Github Repository

Tags: #VueJs