billboard.js

billboard.js

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

Star

Get Started

billboard.js, the "chart" library


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

billboard.js provide the easiest way to create 'chart' instantly.


Quick Start Guide


Step 1. Load billboard.js with D3.js

<!-- Load D3.js -->
<script src="https://d3js.org/d3.v4.min.js"></script>

<!-- Load billboard.js with style -->
<script src="billboard.js"></script>
<link rel="stylesheet" href="billboard.css">

Step 2. Setup your chart holder

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

Step 3. Generate 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 flavor of your data visualization with billboard.js!

Let's Try!


click edit on CODEPEN to try tasting how easy is!

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

Features


Simple

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


D3 v4+ Compatible

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


Modular

Every code was written as ESM(ES Module) with ES6+ syntax.


Fully compatible with C3.js

billboard.js is forked project of the popular C3.js. You can migrate with the minimal change of your code, taking all the advantages which billboard.js brings.