{"id":12413,"library":"vue-c3","title":"Vue C3 Chart Component","description":"vue-c3 is a reusable Vue.js component designed to integrate C3.js charts into Vue 2 applications. It provides a declarative wrapper around the C3.js library, allowing developers to manage chart data and behaviors through Vue props and an event handler system. The current stable version is 1.2.11. Given its last commit in late 2018, the package is considered abandoned, with no active development, new features, or support for Vue 3 or recent C3/D3 versions. Its primary differentiator was simplifying C3 integration within the Vue 2 ecosystem, abstracting direct DOM manipulation typically required by C3.js. Release cadence was infrequent, with the last update over five years ago, indicating no ongoing maintenance.","status":"abandoned","version":"1.2.11","language":"javascript","source_language":"en","source_url":"https://github.com/chryb/vue-c3","tags":["javascript","vue","c3","d3","component","graph"],"install":[{"cmd":"npm install vue-c3","lang":"bash","label":"npm"},{"cmd":"yarn add vue-c3","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-c3","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for the Vue component framework.","package":"vue","optional":false},{"reason":"Core charting library that vue-c3 wraps.","package":"c3","optional":false}],"imports":[{"note":"Primarily designed for ESM usage within Vue CLI or similar build setups. CommonJS `require` might work in some environments but is generally discouraged for Vue components.","wrong":"const VueC3 = require('vue-c3')","symbol":"VueC3","correct":"import VueC3 from 'vue-c3'"},{"note":"Required to instantiate the event handler for chart communication, as shown in the quickstart example. This import is for the core Vue library itself.","wrong":"const Vue = require('vue')","symbol":"Vue","correct":"import Vue from 'vue'"}],"quickstart":{"code":"<template>\n  <div>\n    <vue-c3 :handler=\"handler\"></vue-c3>\n  </div>\n</template>\n\n<script>\n  import Vue from 'vue'\n  import VueC3 from 'vue-c3'\n\n  export default {\n    name: 'ChartComponent',\n    components: {\n      VueC3\n    },\n\n    data () {\n      return {\n        handler: new Vue()\n      }\n    },\n\n    mounted () {\n      const options = {\n        data: {\n          columns: [\n            ['data1', 2, 4, 1, 5, 2, 1],\n            ['data2', 7, 2, 4, 6, 10, 1]\n          ]\n        },\n        axis: {\n          x: {\n            type: 'category',\n            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']\n          }\n        }\n      }\n      this.handler.$emit('init', options)\n    },\n    beforeDestroy() {\n      this.handler.$emit('destroy');\n    }\n  }\n</script>","lang":"javascript","description":"Demonstrates how to integrate vue-c3 into a Vue 2 component, initialize the chart with data, and manage its lifecycle events."},"warnings":[{"fix":"For Vue 3 projects, consider actively maintained charting libraries built for Vue 3, or use C3.js directly with a custom Vue 3 wrapper.","message":"This package is explicitly built for Vue 2 and is not compatible with Vue 3. Migration to Vue 3 would require a complete rewrite or finding an alternative charting library.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"It is strongly recommended to use a currently maintained charting library or component. If absolutely necessary, audit the code for vulnerabilities and be prepared to fork and maintain it yourself.","message":"The package is abandoned, with the last commit in 2018. It does not receive security updates, bug fixes, or new features, posing potential security or compatibility risks with newer JavaScript environments or C3/D3 versions.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure exact peer dependency versions are installed, or proceed with caution if using newer versions, testing thoroughly for compatibility issues.","message":"vue-c3 relies on specific versions of its peer dependencies (Vue ^2.0.0, c3 ^0.5.4). Using significantly newer versions of Vue or C3 may lead to unexpected behavior or breakage.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `handler: new Vue()` is correctly defined in the component's `data` function, or that the `handler` prop is correctly passed if using it from a parent component.","cause":"The `handler` property, an instance of `Vue`, was not properly initialized or is `null`/`undefined` when `this.handler.$emit` is called.","error":"TypeError: Cannot read properties of undefined (reading '$emit')"},{"fix":"Make sure `import VueC3 from 'vue-c3'` is present in the script section and `VueC3` is listed in the `components` object of your Vue component (e.g., `components: { VueC3 }`).","cause":"The `VueC3` component was not imported or registered correctly within the current Vue component where it's being used.","error":"[Vue warn]: Unknown custom element: <vue-c3> - did you register the component correctly?"}],"ecosystem":"npm"}