C3.js Deployment & Usage Guide

A comprehensive guide for installing, configuring, and deploying C3.js, the D3-based reusable chart library.

1. Prerequisites

For Using the Library:

Modern web browser (Chrome, Firefox, Safari, Edge)
Web server (local or remote) to serve HTML files
D3.js ^5.0.0 (loaded as dependency)

For Development/Contributing:

Node.js (v12 or higher recommended)
npm or yarn
Git
Modern web browser

2. Installation

Option A: CDN (Recommended for Quick Start)

Include via jsDelivr (official CDN):

<!-- Load D3.js first (required dependency) -->
<script src="https://d3js.org/d3.v5.min.js"></script>

<!-- Load C3 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/c3@latest/c3.min.css">

<!-- Load C3 JS -->
<script src="https://cdn.jsdelivr.net/npm/c3@latest/c3.min.js"></script>

Option B: npm (Recommended for Projects)

npm install c3

Then import in your JavaScript:

import c3 from 'c3';
import 'c3/c3.css';  // Import styles

Note: D3.js is a peer dependency. Install it separately:

npm install d3@^5.0.0

Option C: Source (For Development)

git clone https://github.com/c3js/c3.git
cd c3
npm install

3. Configuration

Basic HTML Setup

Create an HTML file with a container element:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/c3@latest/c3.min.css">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/c3@latest/c3.min.js"></script>
  <style>
    #chart { width: 100%; height: 400px; }
  </style>
</head>
<body>
  <div id="chart"></div>
  
  <script>
    var chart = c3.generate({
      bindto: '#chart',
      data: {
        columns: [
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 50, 20, 10, 40, 15, 25]
        ]
      }
    });
  </script>
</body>
</html>

Module Bundler Configuration (Webpack/Rollup)

If using npm with a module bundler:

// ES6 Modules
import c3 from 'c3';
import 'c3/c3.css';

// CommonJS
var c3 = require('c3');
require('c3/c3.css');

Important: Ensure your bundler handles CSS imports (e.g., style-loader and css-loader for Webpack).

4. Build & Run

Running Samples Locally

The repository includes sample charts in htdocs/samples:

npm run serve-static

This starts a local server to view the sample charts and examples.

Development Build (Contributors)

To build the library from source:

# Install dependencies
npm install

# Build the library (creates c3.js and c3.min.js in root)
npm run build

# Run tests
npm test

# Watch for changes during development
npm run watch

Viewing Documentation Locally

The documentation site (located in docs/) uses Jekyll:

cd docs
bundle install
bundle exec jekyll serve

5. Deployment

For Web Applications

Static Hosting: C3.js generates SVG charts client-side. Deploy your HTML/JS files to any static host:

GitHub Pages
Netlify
Vercel
AWS S3 + CloudFront

Bundled Applications: When using npm, ensure D3 ^5.0.0 is included in your production bundle:

npm run build  # Your app's build command

For Library Maintainers

To publish a new version:

npm version [patch|minor|major]
npm publish

Extensions

The repository includes c3ext.js for advanced zoom behavior. To use extensions:

<script src="path/to/c3ext.js"></script>
<script>
  var chart = c3ext.generate({
    bindto: '#chart',
    zoom2: {
      enabled: true,
      maxItems: 100
    },
    data: { ... }
  });
</script>

6. Troubleshooting

Common Issues

Charts not rendering (blank container)

Cause: Missing CSS file or container has no dimensions
Solution: Ensure c3.css is loaded and the container element has explicit width/height:
```
#chart { width: 100%; height: 400px; }
```

D3 is not defined

Cause: D3.js not loaded before C3 or wrong version

Solution: Load D3 ^5.0.0 before C3:

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="c3.min.js"></script>

RequireJS/AMD errors

Cause: Using RequireJS without proper shim configuration

Solution: Configure RequireJS to load D3 before C3:

requirejs.config({
  paths: {
    d3: 'https://d3js.org/d3.v5.min',
    c3: 'path/to/c3.min'
  },
  shim: {
    c3: { deps: ['d3'] }
  }
});

Zoom/pan not working

Cause: Missing the c3ext.js extension or incorrect configuration
Solution: Include extensions/js/c3ext.js and use c3ext.generate() instead of c3.generate() for enhanced zoom features.

npm install fails

Cause: Node.js version incompatibility
Solution: Use Node.js v12+ and ensure Python 2.7+ is available for native dependencies (node-gyp).

Charts appear distorted on mobile

Cause: Viewport meta tag missing or responsive options not set

Solution: Add viewport meta tag and use resize: { auto: true } in chart configuration:

c3.generate({
  bindto: '#chart',
  size: { height: 320 },
  resize: { auto: true },
  data: { ... }
});

Getting Help

General questions: Google Group
Bug reports: GitHub Issues (include JSFiddle/Plunkr example)
Live chat: Gitter

Debugging Tips

Check browser console for JavaScript errors
Verify D3 version: console.log(d3.version) should return 5.x.x
Inspect the SVG element in DevTools to ensure it has width/height attributes
Test with the official playground to isolate issues

How to Deploy & Use c3js/c3