vue-c3

library1.2.11jsnpmunverified

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.

web-framework serialization

npm install vue-c3

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-C3

vue-c3

web-frameworkjavascriptv1.2.11

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.

VueC3

✓ import VueC3 from 'vue-c3'

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

✓ import Vue from 'vue'

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

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>

Debug

Known issues

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

affects: >=1.0.0

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

affects: >=1.0.0

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

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading '$emit')

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?

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

Upgrade

Version history

1.2.11latest on npm

Audit

Dependencies

vuerequiredRequired peer dependency for the Vue component framework.

c3requiredCore charting library that vue-c3 wraps.

Agent activity

15 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/chryb/vue-c3 ↗

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