{"id":12416,"library":"vue-chartkick","title":"Vue Chartkick","description":"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.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/ankane/vue-chartkick","tags":["javascript"],"install":[{"cmd":"npm install vue-chartkick","lang":"bash","label":"npm"},{"cmd":"yarn add vue-chartkick","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-chartkick","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue.js application integration.","package":"vue","optional":false},{"reason":"Default charting library used by Chartkick. You must install a charting library (e.g., Chart.js, Google Charts, or Highcharts) for charts to render.","package":"chart.js","optional":true},{"reason":"Core JavaScript charting library that Vue Chartkick wraps. This is typically installed automatically with vue-chartkick or specified via a package manager.","package":"chartkick","optional":false}],"imports":[{"note":"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.","wrong":"const VueChartkick = require('vue-chartkick')","symbol":"VueChartkick","correct":"import VueChartkick from 'vue-chartkick'"},{"note":"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.","wrong":"import 'chart.js'","symbol":"Chart.js adapter","correct":"import 'chartkick/chart.js'"},{"note":"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.","symbol":"Chart Components","correct":"<line-chart :data=\"...\"></line-chart>"}],"quickstart":{"code":"import { createApp } from 'vue'\nimport VueChartkick from 'vue-chartkick'\nimport 'chartkick/chart.js'\nimport App from './App.vue'\n\n// In your main.js or similar entry file\nconst app = createApp(App)\napp.use(VueChartkick)\napp.mount('#app')\n\n// Example App.vue\n// <template>\n//   <div>\n//     <h1>My Dashboard</h1>\n//     <line-chart :data=\"{'2021-01-01': 11, '2021-01-02': 6}\"></line-chart>\n//     <pie-chart :data=\"[['Blueberry', 44], ['Strawberry', 23]]\"></pie-chart>\n//   </div>\n// </template>\n// <script>\n// export default {\n//   name: 'App'\n// }\n// </script>","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install chart.js` and ensure `import 'chartkick/chart.js'` is present in your application's entry file.","cause":"The Chart.js library or its Chartkick adapter was not correctly installed or imported.","error":"Module not found: Error: Can't resolve 'chartkick/chart.js'"},{"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.","cause":"The Vue Chartkick plugin was not correctly registered with the Vue application instance.","error":"Failed to resolve component: line-chart (or pie-chart, etc.)"},{"fix":"For Vue 3, you must use an application instance to register plugins: `createApp(App).use(VueChartkick)`.","cause":"You are attempting to use the Vue 2 plugin registration syntax (`Vue.use()`) in a Vue 3 project.","error":"Property 'use' does not exist on type 'Vue<any, any, any, any>' (for Vue.use(VueChartkick))"},{"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.","cause":"The required Google Charts library (specifically for GeoChart) or its Chartkick adapter is not properly loaded or initialized.","error":"No charting library found for GeoChart"}],"ecosystem":"npm"}