Vue C3 Chart Component

1.2.11 · abandoned · verified Sun Apr 19

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.

Common errors

```
TypeError: Cannot read properties of undefined (reading '$emit')
```
cause The `handler` property, an instance of `Vue`, was not properly initialized or is `null`/`undefined` when `this.handler.$emit` is called.

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.
```
[Vue warn]: Unknown custom element: <vue-c3> - did you register the component correctly?
```
cause The `VueC3` component was not imported or registered correctly within the current Vue component where it's being used.

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

Warnings

breaking 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.
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.
breaking 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.
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.
gotcha 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.
Fix: Ensure exact peer dependency versions are installed, or proceed with caution if using newer versions, testing thoroughly for compatibility issues.

Install

npm install vue-c3 npm
yarn add vue-c3 yarn
pnpm add vue-c3 pnpm

Imports

VueC3
wrong:
```
const VueC3 = require('vue-c3')
```
correct:
```
import VueC3 from 'vue-c3'
```
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.
Vue
wrong:
```
const Vue = require('vue')
```
correct:
```
import Vue from 'vue'
```
Required to instantiate the event handler for chart communication, as shown in the quickstart example. This import is for the core Vue library itself.

Quickstart

Demonstrates how to integrate vue-c3 into a Vue 2 component, initialize the chart with data, and manage its lifecycle events.

<template>
  <div>
    <vue-c3 :handler="handler"></vue-c3>
  </div>
</template>

<script>
  import Vue from 'vue'
  import VueC3 from 'vue-c3'

  export default {
    name: 'ChartComponent',
    components: {
      VueC3
    },

    data () {
      return {
        handler: new Vue()
      }
    },

    mounted () {
      const options = {
        data: {
          columns: [
            ['data1', 2, 4, 1, 5, 2, 1],
            ['data2', 7, 2, 4, 6, 10, 1]
          ]
        },
        axis: {
          x: {
            type: 'category',
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
          }
        }
      }
      this.handler.$emit('init', options)
    },
    beforeDestroy() {
      this.handler.$emit('destroy');
    }
  }
</script>

view raw JSON →