billboard.js 1.11.0 release: Lazy render, new TextOverlap plugin & more!

What’s New?

Lazy Rendering

Lazy Rendering in action
// (1) Initial state
<div id='chart' style='display:none'></div>
// (2) Generate chart as usual, but it won't be rendered until '#chart' element visibility change automatically.
const chart = bb.generate({
bindto: "#chart",
// (3) Update the visibility to make chart to be rendered
document.getElementById('chart').style.display = 'block';
render: {
lazy: true, // Make to not render at initialization
observe: false // Observe bind element's visibility

new TextOverlap Plugin

(Left) Normal positioning / (Right) TextOverlap Plugin applied
const chart = bb.generate({
data: {
columns: [ ... ]
plugins: [
new bb.plugin.textoverlap({
// selector for data label text nodes
selector: ".bb-texts text",
// extent of label overlap prevention
extent: 8,
// minimum area needed to show a data label
area: 3


pie’s startingAngle option
donut: {
startingAngle: 0.7
pie: {
startingAngle: 1


x Axes with domain option and y Axes without.
[x|y|y2]: {
axes: [
// set new domain value
domain: [0, 1000],

Improved data.labels.position

Different data label text position for each data
position: {
data1: {x: 5, y: 5},
data2: {x: 10, y: -20}


Image background and colored background
background: {
class: "myClass",
color: "red",
// Set image url for background.
// If specified, 'color' option will be ignored.
imgUrl: "",


data: {
onover/out: function(d, element) {
// d - ex) {x: 4, value: 150, id: "data1", index: 4}
// element - <circle>

Changes might you need to know

The display of one data only and stack data

The great Contributors!

What’s Next?




Front-end engineer at NAVER, creator of billboard.js

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Custom React Hooks: Why Do We Need a Context

Introducing Ignite 6.0: “Flame”

Translating Dust templates to JSX

The Switch Statement in JavaScript

Photo by Tim Mossholder from Pexels

JavaScript Algorithm: Longest Word

Summer Training Program| Javascript Workshop

React and Drupal 8 with JSON API 2/3

You’re doing JavaScript exports wrong. Here’s why.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jae Sung Park

Jae Sung Park

Front-end engineer at NAVER, creator of billboard.js

More from Medium

Host a BI report using ReactJs+Firebase with Auth — Part3 react-router (Routing)+ Auth set up

Create a simple 3D Force Graph for Nextjs or CRA

Introduction to Astro

Visualize Data with GridDB and the WebAPI using React.js