Re-usable, easy-interface JavaScript chart library built on D3 v4+. Render to SVG or Canvas from the same API — generate a chart in three lines.
Powerful defaults, endless customization.
Create a chart instantly with sensible defaults and extensive options.
One API, two renderers. Switch to canvas for high-density, large-data charts.
Written as ES Modules with ES6+ syntax. Import only what you need.
Combine hundreds of options and themes to match any design.
The same chart config renders to SVG or Canvas. Canvas mode draws high-density
scatter, line and area charts to a single <canvas> — smooth even with
tens of thousands of points.
Two steps to your first chart.
<!-- D3 (peer dependency) -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- billboard.js with base style -->
<script src="$YOUR_PATH/billboard.js"></script>
<link rel="stylesheet" href="$YOUR_PATH/billboard.css">
<!-- chart holder -->
<div id="chart"></div><script>
// bb is available as a global
const chart = bb.generate({
bindto: "#chart",
data: {
type: "bar",
columns: [
["data1", 30, 200, 100, 170, 150, 250],
["data2", 130, 100, 140, 35, 110, 50]
]
}
});
</script>import bb, {bar} from "billboard.js";
import "billboard.js/dist/billboard.css";
const chart = bb.generate({
bindto: "#chart",
data: {
type: bar(),
columns: [
["data1", 30, 200, 100, 170, 150, 250],
["data2", 130, 100, 140, 35, 110, 50]
]
}
});import bb, {scatter, canvas} from "billboard.js/canvas";
import "billboard.js/dist/billboard.css";
bb.generate({
bindto: "#chart",
render: { mode: canvas() }, // high-density backend
data: {
type: scatter(),
/* thousands of points, still smooth */
}
});