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

<!-- Step 1) Load D3.js -->
<script src="https://d3js.org/d3.v6.min.js"></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. All 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.


Rich options

Combine hundreds of options to satisfy your needs. Checkout the examples to see in action!