The name "billboard" comes from the famous
"billboard chart" which everybody knows.
billboard.js provides the easiest way to create a 'chart' instantly.
<!-- 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">
<div id="chart"></div>
var chart = bb.generate({
bindto: "#chart",
data: {
type: "bar",
columns: [
["data1", 30, 200, 100, 170, 150, 250],
["data2", 130, 100, 140, 35, 110, 50]
]
}
});
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!
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.
Combine hundreds of options to satisfy your needs. Checkout the examples to see in action!