Re-usable, easy interface JavaScript chart library, based on D3 v4+.


Get Started

billboard.js, the "chart" library

The name "billboard" comes from the famous
"billboard chart" which everybody knows.

billboard.js provides the easiest way to create a 'chart' instantly.

Quick Start Guide

Step 1. Load billboard.js and D3.js

<!-- Step 1) Load D3.js -->
<script src=""></script>

<!-- Step 2) Load billboard.js with style -->
<script src="$YOUR_PATH/billboard.js"></script>

<!-- Load with base style -->
<link rel="stylesheet" href="$YOUR_PATH/billboard.css">

<!-- Or load different theme style -->
<link rel="stylesheet" href="$YOUR_PATH/theme/insight.css">

Step 2. Setup your chart holder

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

Step 3. Generate a chart with options

var chart = bb.generate({
    bindto: "#chart",
    data: {
        type: "bar",
        columns: [
            ["data1", 30, 200, 100, 170, 150, 250],
            ["data2", 130, 100, 140, 35, 110, 50]

Step 4. Done.

Enjoy your data visualization with billboard.js!

Let's Try!

Click edit on CODEPEN to get a taste for how easy it is!

See the Pen billboard.js by Jae Sung Park (@netil) on CodePen.



Chart generation is super easy. With extensive options, you can create a chart instantly!

D3 v4+ Compatible

Yes, billboard.js works on D3 v4+; what everybody was waiting for!


All of the code was written as an ESM(ES Module) with ES6+ syntax.

Fully compatible with C3.js

billboard.js is forked from the popular C3.js project. You can migrate your C3.js based project to billboard.js with minimal code changes to take advantage of everything billboard.js brings.