C3.js Vue.js Tutorial

What is C3.js?

C3.js is a high-level API on top of D3.js. It has an active community for support, is highly customizable, and benefits from having great code reusability. It has a steep learning curve and is more limited when it comes to the number of charts offered.

What is Vue.js?

Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications (SPAs). It was created by Evan You and is designed to be incrementally adoptable. The core library focuses on the view layer only, making it easy to pick up and integrate with other libraries or existing projects. Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. It has a virtual DOM for faster and more efficient manipulation, composable components, and a relatively low learning curve. It is great for ease-of-use, performance, and overall developer experience.

C3.js Vue.js Code Example

This guide will demonstrate a basic example of integrating the C3.js chart library with Vue.js to create dynamic and responsive charts.

First, ensure you have Vue.js and C3.js (along with D3.js, which C3.js depends on) installed in your project. If they're not installed, you can add them using npm or include them directly in your project via CDN links.

Step 1: Include C3.js and D3.js via CDN

If you're not using npm for package management, you can include C3.js and D3.js in your HTML file using the following CDN links:

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" rel="stylesheet">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>

Step 2: Create a Vue Component

Create a new Vue component where you will generate your chart. This component will use a <div> as a container for the C3.js chart.

 <div id="chart"></div>

export default {

 name: 'C3Chart',

 mounted() {



 methods: {

   generateChart() {

     const chart = c3.generate({

       bindto: '#chart',

       data: {

         columns: [

           ['data1', 30, 200, 100, 400, 150, 250],

           ['data2', 50, 20, 10, 40, 15, 25]


         type: 'bar' // Change type to 'line', 'spline', etc. based on your needs






Step 3: Including the Vue Component

Now, include the Vue component you've created in your app. If using a Vue instance, you'd do something like this:

<div id="app">

import Vue from 'vue';
import C3Chart from './components/C3Chart.vue';

new Vue({
 el: '#app',
 components: {
   'c3-chart': C3Chart

Note: The paths and component names are just examples. You should adjust them according to your project structure and naming conventions.

This simple example demonstrates how to integrate C3.js charts into a Vue.js application by creating a reusable Vue component that encapsulates the chart generation logic. You can expand this by adding props, data, and methods to dynamically update and control your C3.js charts based on your application's requirements.

Explo: The Best Javascript Charting Option on the Market

Looking for the fastest, easiest way to make responsive next-level charts on your website? Reach out to Explo, the market leader in creating responsive charts. With Explo's Report Builder and Editable Sections offerings, you can easily drag-and-drop charts and custom reporting in a matter of minutes, all with just SQL and no-code tools. No need to learn and configure charts, use our highly customizable solution instead.