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
})
]
});

donut/pie.startingAngle

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

axes.domain

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

background

Image background and colored background
background: {
class: "myClass",
color: "red",
// Set image url for background.
// If specified, 'color' option will be ignored.
imgUrl: "https://naver.github.io/billboard.js/img/logo/billboard.js.svg",
}

data.onover/out

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