# Vue Chartkick
Create beautiful JavaScript charts with one line of Vue
[See it in action](https://www.chartkick.com/vue)
Supports [Chart.js](https://www.chartjs.org/), [Google Charts](https://developers.google.com/chart/), and [Highcharts](https://www.highcharts.com/)
[](https://github.com/ankane/vue-chartkick/actions)
## Quick Start
Run
```sh
npm install vue-chartkick chart.js
```
The latest version works with Vue 3. For Vue 2, use version 0.6.1 and [this readme](https://github.com/ankane/vue-chartkick/blob/vue2-docs/README.md).
And add it to your app
```javascript
import VueChartkick from 'vue-chartkick'
import 'chartkick/chart.js'
app.use(VueChartkick)
```
This sets up Chartkick with Chart.js. For other charting libraries, see [detailed instructions](#installation).
## Charts
Line chart
```vue
```
Pie chart
```vue
```
Column chart
```vue
```
Bar chart
```vue
```
Area chart
```vue
```
Scatter chart
```vue
```
Geo chart - *Google Charts*
```vue
```
Timeline - *Google Charts*
```vue
```
Multiple series
```javascript
data = [
{name: 'Workout', data: {'2026-01-01': 3, '2026-01-02': 4}},
{name: 'Call parents', data: {'2026-01-01': 5, '2026-01-02': 3}}
];
```
and
```vue
```
## Data
Data can be an array, object, callback, or URL.
#### Array
```vue
```
#### Object
```vue
```
#### Callback
```javascript
function fetchData(success, fail) {
success({"2026-01-01": 2, "2026-01-02": 3})
// or fail("Data not available")
}
```
and
```vue
```
#### URL
Make your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.
```vue
```
## Options
Id, width, and height
```vue
```
Min and max values
```vue
```
`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*
```vue
```
Colors
```vue
```
Stacked columns or bars
```vue
```
Discrete axis
```vue
```
Label (for single series)
```vue
```
Axis titles
```vue
```
Straight lines between points instead of a curve
```vue
```
Show or hide legend
```vue
```
Specify legend position
```vue
```
Donut chart
```vue
```
Prefix, useful for currency - *Chart.js, Highcharts*
```vue
```
Suffix, useful for percentages - *Chart.js, Highcharts*
```vue
```
Set a thousands separator - *Chart.js, Highcharts*
```vue
```
Set a decimal separator - *Chart.js, Highcharts*
```vue
```
Set significant digits - *Chart.js, Highcharts*
```vue
```
Set rounding - *Chart.js, Highcharts*
```vue
```
Show insignificant zeros, useful for currency - *Chart.js, Highcharts*
```vue
```
Friendly byte sizes - *Chart.js 2.8+*
```vue
```
Specify the message when the chart is loading
```vue
```
Specify the message when data is empty
```vue
```
Refresh data from a remote source every `n` seconds
```vue
```
You can pass options directly to the charting library with:
```vue
```
See the documentation for [Google Charts](https://developers.google.com/chart/interactive/docs/gallery), [Highcharts](https://api.highcharts.com/highcharts), and [Chart.js](https://www.chartjs.org/docs/) for more info.
To customize datasets in Chart.js, use:
```vue
```
You can pass this option to individual series as well.
Use [dynamic components](https://vuejs.org/v2/guide/components.html#Dynamic-Components) to make the chart type dynamic:
```vue
```
### Reactivity
While some of the examples use object or array literals in props for demonstration, this can lead to unnecessary re-renders.
```vue
```
Instead, use a data property:
```vue
```
See [this discussion](https://github.com/vuejs/vue/issues/4060) for more details.
### Global Options
To set options for all of your charts, use:
```javascript
Chartkick.options = {
colors: ["#b00", "#666"]
}
```
### Multiple Series
You can pass a few options with a series:
- `name`
- `data`
- `color`
- `dataset` - *Chart.js only*
- `points` - *Chart.js only*
- `curve` - *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.
```vue
```
Set the filename
```vue
```
**Note:** Safari will open the image in a new window instead of downloading.
Set the background color
```vue
```
## Installation
### Chart.js
Run
```sh
npm install vue-chartkick chart.js
```
And add
```javascript
import VueChartkick from 'vue-chartkick'
import 'chartkick/chart.js'
app.use(VueChartkick)
```
### Google Charts
Run
```sh
npm install vue-chartkick
```
And add
```javascript
import VueChartkick from 'vue-chartkick'
app.use(VueChartkick)
```
And include on the page
```html
```
To specify a language or Google Maps API key, use:
```javascript
Chartkick.configure({language: "de", mapsApiKey: "..."})
```
### Highcharts
Run
```sh
npm install vue-chartkick highcharts
```
And add
```javascript
import VueChartkick from 'vue-chartkick'
import 'chartkick/highcharts'
app.use(VueChartkick)
```
### No Package Manager
Include the charting library and the Chartkick library
```html
```
And add
```javascript
app.use(VueChartkick)
```
### Multiple Libraries
If more than one charting library is loaded, choose between them with:
```vue
```
Options are `google`, `highcharts`, and `chartjs`
## Example
```vue
```
## History
View the [changelog](https://github.com/ankane/vue-chartkick/blob/master/CHANGELOG.md)
## Contributing
Everyone is encouraged to help improve this project. Here are a few ways you can help:
- [Report bugs](https://github.com/ankane/vue-chartkick/issues)
- Fix bugs and [submit pull requests](https://github.com/ankane/vue-chartkick/pulls)
- Write, clarify, or fix documentation
- Suggest or add new features
To get started with development, run:
```sh
git clone https://github.com/ankane/vue-chartkick.git
cd vue-chartkick
npm install
npm run build
```