Registry / web-framework / vue-chartkick

vue-chartkick

library1.1.0jsnpmunverified

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.

web-framework data

npm install vue-chartkick

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-CHARTKICK

vue-chartkick

web-frameworkjavascriptv1.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueChartkick

✓ import VueChartkick from 'vue-chartkick'

✗ const VueChartkick = require('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

✓ import 'chartkick/chart.js'

✗ import '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.

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>

Debug

Known issues

breakingVue 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.

affects: >=1.0.0

gotchaVue 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.

affects: >=0.1.0

gotchaWhen 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.

affects: >=0.1.0

gotchaCharts 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.

affects: >=0.1.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'chartkick/chart.js'

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.)

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))

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

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.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency for Vue.js application integration.

chart.jsoptionalDefault charting library used by Chartkick. You must install a charting library (e.g., Chart.js, Google Charts, or Highcharts) for charts to render.

chartkickrequiredCore JavaScript charting library that Vue Chartkick wraps. This is typically installed automatically with vue-chartkick or specified via a package manager.

Agent activity

20 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ankane/vue-chartkick ↗

packagehttps://www.npmjs.com/package/vue-chartkick ↗

homepagehttps://chartkick.com/vue.js ↗