Create beautiful JavaScript charts with one line of Vue
Supports Chart.js, Google Charts, and Highcharts
Run
npm install vue-chartkick chart.js
And add
import Vue from 'vue'
import Chartkick from 'vue-chartkick'
import Chart from 'chart.js'
Vue.use(Chartkick.use(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" />
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.
Min and max for x-axis - Chart.js
<line-chart xmin="2018-01-01" xmax="2019-01-01"></line-chart>
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>
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>
Set significant digits - Chart.js, Highcharts
<line-chart :precision="3"></line-chart>
Set rounding - Chart.js, Highcharts
<line-chart :round="2"></line-chart>
Show insignificant zeros, useful for currency - Chart.js, Highcharts
<line-chart :round="2" :zeros="true"></line-chart>
Friendly byte sizes - Chart.js 2.8+
<line-chart :bytes="true"></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>
To set options for all of your charts, use:
Chartkick.options = {
colors: ["#b00", "#666"]
}
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>
Data can also be a callback
function fetchData(success, fail) {
success({"Blueberry": 44, "Strawberry": 23})
// or fail("Data not available")
}
<pie-chart :data="fetchData" />
You can pass a few options with a series:
name
data
color
dataset
- Chart.js onlypoints
- Chart.js onlycurve
- Chart.js only
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.
Set the background color
<line-chart :download="{background: '#fff'}"></line-chart>
Run
npm install vue-chartkick chart.js
And add
import Vue from 'vue'
import Chartkick from 'vue-chartkick'
import Chart from 'chart.js'
Vue.use(Chartkick.use(Chart))
Run
npm install vue-chartkick
And add
import Vue from 'vue'
import Chartkick from 'vue-chartkick'
Vue.use(Chartkick)
And include on the page
<script src="https://www.gstatic.com/charts/loader.js"></script>
To specify a language or Google Maps API key, use:
Chartkick.configure({language: "de", mapsApiKey: "..."})
Run
npm install vue-chartkick highcharts
And add
import Vue from 'vue'
import Chartkick from 'vue-chartkick'
import Highcharts from 'highcharts'
Vue.use(Chartkick.use(Highcharts))
Include the charting library and the Chartkick library
<script src="https://unpkg.com/[email protected]/dist/Chart.bundle.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
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>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
chartData: [["Jan", 4], ["Feb", 2], ["Mar", 10], ["Apr", 5], ["May", 3]]
}
})
</script>
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
To get started with development, run:
git clone https://github.com/ankane/vue-chartkick.git
cd vue-chartkick
npm install
npm run build