Vue Chartkick

Create beautiful JavaScript charts with one line of Vue

See it in action

Supports Chart.js, Google Charts, and Highcharts

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.

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.

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

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

// and

`

$3

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

`vue

`

$3

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, Highcharts, and Chart.js for more info.

To customize datasets in Chart.js, use:

`vue

`

You can pass this option to individual series as well.

Use dynamic components to make the chart type dynamic:

`vue

`

$3

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 for more details.

$3

To set options for all of your charts, use:

`javascript
Chartkick.options = {
colors: ["#b00", "#666"]
}
`

$3

Pass data as an array or object

`vue


`

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

`vue

`

Data can also be a callback

`vue
function fetchData(success, fail) {
success({"Blueberry": 44, "Strawberry": 23})
// or fail("Data not available")
}


`

$3

You can pass a few options with a series:

- name
- data
- color
- dataset - Chart.js only
- points - Chart.js only
- curve - Chart.js only

$3

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

$3

Run

`sh
npm install vue-chartkick chart.js
`

And add

`javascript
import VueChartkick from 'vue-chartkick'
import 'chartkick/chart.js'

app.use(VueChartkick)
`

$3

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: "..."})
`

$3

Run

`sh
npm install vue-chartkick highcharts
`

And add

`javascript
import VueChartkick from 'vue-chartkick'
import 'chartkick/highcharts'

app.use(VueChartkick)
`

$3

Include the charting library and the Chartkick library

`html




`

And add

`javascript
app.use(VueChartkick)
`

$3

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

`vue

`

Options are google, highcharts, and chartjs

Example

`vue



`

Upgrading

$3

Vue Chartkick 1.0 adds support for Vue 3. Vue 3 requires you to specify plugins for each app.

`javascript
Vue.use(Chartkick.use(Chart))
`

to

`javascript
app.use(Chartkick.use(Chart))
`

For the no package manager install, Chartkick.js is no longer bundled, allowing you to update them independently. Include it manually before Vue Chartkick.

`html

``

Finally, Vue Chartkick no longer uses custom logic to see if a re-render is necessary. See the reactivity docs for more details.

Contributing

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:

`sh
git clone https://github.com/ankane/vue-chartkick.git
cd vue-chartkick
npm install
npm run build
``