Vue Chartkick

1.1.0 · active · verified Sun Apr 19

Vue Chartkick is a wrapper for the Chartkick.js library, designed to simplify the creation of interactive charts within Vue.js applications. It provides a declarative, component-based API that allows developers to render various chart types with minimal code. The library acts as an abstraction layer, supporting popular underlying charting engines like Chart.js, Google Charts, and Highcharts. The current stable version, 1.1.0, is specifically built for Vue 3, with version 0.6.1 being the last compatible version for Vue 2 applications. Its key differentiators include one-line chart component syntax, the ability to fetch chart data directly from API endpoints for improved performance, and broad support for different charting libraries, offering flexibility in visualization choices.

Common errors

```
Module not found: Error: Can't resolve 'chartkick/chart.js'
```
cause The Chart.js library or its Chartkick adapter was not correctly installed or imported.

fix Run `npm install chart.js` and ensure `import 'chartkick/chart.js'` is present in your application's entry file.
```
Failed to resolve component: line-chart (or pie-chart, etc.)
```
cause The Vue Chartkick plugin was not correctly registered with the Vue application instance.

fix Ensure `app.use(VueChartkick)` is called on your Vue 3 application instance (or `Vue.use(VueChartkick)` for Vue 2) in your `main.js` or equivalent setup file.
```
Property 'use' does not exist on type 'Vue<any, any, any, any>' (for Vue.use(VueChartkick))
```
cause You are attempting to use the Vue 2 plugin registration syntax (`Vue.use()`) in a Vue 3 project.

fix For Vue 3, you must use an application instance to register plugins: `createApp(App).use(VueChartkick)`.
```
No charting library found for GeoChart
```
cause The required Google Charts library (specifically for GeoChart) or its Chartkick adapter is not properly loaded or initialized.

fix For Google Charts, ensure you have loaded the Google Charts loader script globally (e.g., in `index.html`) using `<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>` in addition to importing `chartkick/google` in your JS.

Warnings

breaking Vue Chartkick v1.0.0 and above dropped support for Vue 2. If you are using Vue 2, you must use vue-chartkick version 0.6.1 or earlier. Attempting to use v1.x with Vue 2 will result in errors related to Vue plugin registration.
Fix: For Vue 2 projects, downgrade to `npm install vue-chartkick@0.6.1 chart.js@2.9 --save`. For Vue 3 projects, ensure you are using `createApp().use()` syntax.
gotcha Vue Chartkick requires an underlying charting library (like Chart.js, Google Charts, or Highcharts) to be installed and its Chartkick adapter imported separately. Without this, charts will not render and you may see 'No charting library found' errors.
Fix: Run `npm install chart.js` (or `google-charts`, `highcharts`) and then `import 'chartkick/chart.js'` (or the appropriate adapter) in your main application entry file.
gotcha When using Google Charts or Highcharts, their respective libraries might need additional setup (e.g., loading scripts globally in `index.html` for Google Charts) beyond just importing the Chartkick adapter.
Fix: Refer to the Chartkick documentation for specific instructions on integrating Google Charts or Highcharts, which may include adding `<script>` tags to your `index.html` for global library loading.
gotcha Charts may not reactively update when data changes if the data object itself is mutated directly or if reactivity principles for nested objects are not followed in Vue.
Fix: Ensure that the `:data` prop is properly reactive by providing new data objects/arrays when changes occur, or by using Vue's reactivity system correctly. For complex objects, consider using `watch` or computed properties that return new data instances.

Install

npm install vue-chartkick npm
yarn add vue-chartkick yarn
pnpm add vue-chartkick pnpm

Imports

VueChartkick
wrong:
```
const VueChartkick = require('vue-chartkick')
```
correct:
```
import VueChartkick from 'vue-chartkick'
```
Vue Chartkick is primarily distributed as an ESM module for modern JavaScript environments since v1.0.0 (Vue 3 support). CommonJS `require` is not the recommended or standard approach.
Chart.js adapter
wrong:
```
import 'chart.js'
```
correct:
```
import 'chartkick/chart.js'
```
After installing 'chart.js', you must import the Chartkick adapter for Chart.js from 'chartkick/chart.js' to enable its functionality within Vue Chartkick. This is distinct from importing `chart.js` directly. For other libraries, use `chartkick/google` or `chartkick/highcharts` respectively.
Chart Components
```
<line-chart :data="..."></line-chart>
```
Chart components like `<line-chart>`, `<pie-chart>`, etc., are globally registered when you `app.use(VueChartkick)`, so no direct component import is needed in single-file components.

Quickstart

Demonstrates how to install `vue-chartkick` and `chart.js`, then register the plugin globally in a Vue 3 application to render basic line and pie charts.

import { createApp } from 'vue'
import VueChartkick from 'vue-chartkick'
import 'chartkick/chart.js'
import App from './App.vue'

// In your main.js or similar entry file
const app = createApp(App)
app.use(VueChartkick)
app.mount('#app')

// Example App.vue
// <template>
//   <div>
//     <h1>My Dashboard</h1>
//     <line-chart :data="{'2021-01-01': 11, '2021-01-02': 6}"></line-chart>
//     <pie-chart :data="[['Blueberry', 44], ['Strawberry', 23]]"></pie-chart>
//   </div>
// </template>
// <script>
// export default {
//   name: 'App'
// }
// </script>

view raw JSON →