vue-chartkick

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

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

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

Pie chart

Column chart

Bar chart

Area chart

Scatter chart

Geo chart - Google Charts

Timeline - Google Charts

Multiple series

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

Data

Data can be an array, object, callback, or URL.

Array

Object

Callback

function fetchData(success, fail) {
  success({"2026-01-01": 2, "2026-01-02": 3})
  // or fail("Data not available")
}

and

URL

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

Options

Id, width, and height

Min and max values

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

Colors

Stacked columns or bars

Discrete axis

Label (for single series)

Axis titles

Straight lines between points instead of a curve

Show or hide legend

Specify legend position

Donut chart

Prefix, useful for currency - Chart.js, Highcharts

Suffix, useful for percentages - Chart.js, Highcharts

Set a thousands separator - Chart.js, Highcharts

Set a decimal separator - Chart.js, Highcharts

Set significant digits - Chart.js, Highcharts

Set rounding - Chart.js, Highcharts

Show insignificant zeros, useful for currency - Chart.js, Highcharts

Friendly byte sizes - Chart.js 2.8+

Specify the message when the chart is loading

Specify the message when data is empty

Refresh data from a remote source every n seconds

You can pass options directly to the charting library with:

See the documentation for Google Charts, Highcharts, and Chart.js for more info.

To customize datasets in Chart.js, use:

You can pass this option to individual series as well.

Use dynamic components to make the chart type dynamic:

Reactivity

While some of the examples use object or array literals in props for demonstration, this can lead to unnecessary re-renders.

Instead, use a data property:

See this discussion for more details.

Global Options

To set options for all of your charts, use:

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.

Set the filename

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

Set the background color

Installation

Chart.js

Run

npm install vue-chartkick chart.js

And add

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

app.use(VueChartkick)

Google Charts

Run

npm install vue-chartkick

And add

import VueChartkick from 'vue-chartkick'

app.use(VueChartkick)

And include on the page

To specify a language or Google Maps API key, use:

Chartkick.configure({language: "de", mapsApiKey: "..."})

Highcharts

Run

npm install vue-chartkick highcharts

And add

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

app.use(VueChartkick)

No Package Manager

Include the charting library and the Chartkick library

And add

app.use(VueChartkick)

Multiple Libraries

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

Options are google, highcharts, and chartjs

Example

History

View the changelog

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:

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