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" 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

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

Features


Simple

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!


Modular

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.