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

What’s New?

Lazy Rendering

The lazy rendering functionality make render lazily when chart bind element visibility is hidden. And when element turn to be visible, automatically renders the chart.

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

The new “TextOverlap” plugin prevents label text overlap using Voronoi layout from the excellent contribution by github/kimberlybaum!

(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

New startingAngle option for donut & pie, gives the control of start angle where it draws.

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

axes.domain

The axes options for x, y and y2 Axis, makes to add multiple axes for each Axis. But the added Axes’ tick scales was bound to its main Axis, where making harder if you need display different scale than its original value.

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

Improved data.labels.position

data.labels.position option makes positioned data label texts in different position relatively its original position.

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

background

Added new background option, where you can add background’s image or colred 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

The data.onover/out option callback has a small improvement. From this reelase, the callback will receive second argument.

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

Changes might you need to know

Legend behaviour in Gauge
By default, for gauge type was disabled displaying legend. This was okay when displaying one data only.

The display of one data only and stack data

The great Contributors!

This release could be possible because of the hard work of all contributors. Thanks for your support!

What’s Next?

For this year was planned the next major 2.0, but facing a lot of difficulties handling issues and lack of resource the work has been posponed for next year.

--

--

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