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

This release comes with 7 new features added & 14 bug fixes.

For the detailed release info, please checkout the release note:
https://github.com/naver/billboard.js/releases/tag/1.11.0

What’s New?

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.

Demo: https://naver.github.io/billboard.js/demo/#ChartOptions.LazyRender

Imagine constructing a hidden element at the initialization on your page for different purpose like ‘Tab based UI’. And when user clicks/tap the ‘tab’, it changes its visibility state and that’s the time to make displaying chart.

Let’s see an example in action. The chart element is hidden, but when chart element display prop changes, it renders automatically.

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';

If you need handle rendering more in detail, you can use render option for that.

render: {
lazy: true, // Make to not render at initialization
observe: false // Observe bind element's visibility
}

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

Demo: https://naver.github.io/billboard.js/demo/#Plugins.TextOverlap

Data label text can be overlapped according its data value and it gets worse if there’re lots of dataset to be displayed. In this scenario, TextOverlap plugin comes to play to solve the issue.

(Left) Normal positioning / (Right) TextOverlap Plugin applied

Based on Voronoi layout, it makes to be positioning label texts nicely.

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

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

Demo: https://naver.github.io/billboard.js/demo/#DonutChartOptions.StartingAngle

Checkout the below example screenshot.

The left image show the normal(default) starting angle, where it begins top-centered position. The right image is when set different starting point.

pie’s startingAngle option

The usage is really simple. Just set starting angle value for donut & pie.

donut: {
startingAngle: 0.7
},
pie: {
startingAngle: 1
},

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.

The new axes.domain option, makes this possible facilitating show different scale values.

Demo: https://naver.github.io/billboard.js/demo/#Axis.MultiAxesDomain

Checkout the example below. The y2 Axes tick texts are bound to the main y2 Axis. The y Axes tick having a [0, 1000] domain value, differ from its main y Axis scale value.

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

One thing to remember on this. Normally, the Axis’ scale is bound to its data value. But specifying different domain value, it means there’s no relation with the data value. In this case, the interaction of data(toggling, new data load, etc.) will not be affected for added axes.

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

But it had a limitation where it couldn’t be controlled by each data. To improved on this, an enhancement were added from this release.

Demo: https://naver.github.io/billboard.js/demo/#Data.DataLabelPosition

Different data label text position for each data

The usage is really simple. Just specify x/y coordinate value for each dataset and all done.

position: {
data1: {x: 5, y: 5},
data2: {x: 10, y: -20}
}

Added new background option, where you can add background’s image or colred background.

Demo: https://naver.github.io/billboard.js/demo/#ChartOptions.Background

Image background and colored background

Adding a background is really simple. Just specify the value you need.

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

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

The new argument will have the reference of the where onover/out event triggered. This will facilitate controlling data points more easily.

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

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

But with the addition of stack data in gauge, arose the necessity of knowing and distinguishing each other.

The display of one data only and stack data

From this release, legend display is enabled by default. So, if you want hide legend as before add legend.show = false option.

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.

As always, thanks for all contributors and all users!
Stay well until the next release.

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