billboard.js 3.5 release: new boost options! 🚀💥

Jae Sung Park
4 min readJun 30, 2022

--

Excited to share another new 3.5 release 🥳 !. This release comes with 5 new features and 16 bug fixes.

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

What’s New?

boost options

From this release, adds two new options to boost the performance.

boost.useCssRule

This option let remove as possible inlined style values from the generated node elements.

Demo: https://naver.github.io/billboard.js/demo/#Boost.useCssRule

Think about a situation where you need to display massive data points for one data series. The data series will have its own color value and data points either. But each data point’s color is defined as inlined, which will increment the size relative to the length of the data points.

Also happens for bar types. Each bar shape will contain inlined color definition for each shape.

If remove these definition from the nodes, obviously will benefit to shrink the total size.

Simply turning on the boost.useCssrule option as below, will make all the definition be done by css style rule.

boost: {
useCssRule: true
}

This option will dynamically add a <style> element to the header and add rules to cover all the elements’ color styles.

For now, applies to data points, bar shape and legend elements.

boost.useWorker

The next ‘boost’ option is boost.useWorker option. This option will use WebWorker(ref. “Off The Main Thread”) thread to format given data, which will decrease TBT(Total Blocking Time).

When this option is enabled, can move up the page to become interactive earlier.

Demo: https://naver.github.io/billboard.js/demo/#Boost.useWorker

Simple turn on as below.

boost: {
useWorker: true
}

Did a simple benchmark(w/Chart.js), giving a situation to display 50 data series, which each one having 50 data values(2,500 data in total).

billboard.js (top) / Chart.js (bottom)

Here’s the result table.

data.labels.rotate

New data.labels.rotate option will “rotate” data labels text.

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

Just give degree value(in a range of 0~360), on how the text will be rotated.

data: {
labels: {
rotate: 90 // 90 degree
}
}

area.below

The ‘area’ type will render covering background according the value. When the values goes in a range of negative and positive values, the background area will be based on zero as follows.

What if want the backgrounds to be rendered in one side?

There’s already area.above option, which makes background to be rended the “above” of lines. But not in opposite way.

From this release, added above.below option to make backgrounds area to be rendered “below” the lines.

area: {
below: true
}

Demo: https://naver.github.io/billboard.js/demo/#AreaChartOptions.Below

resize.timer

When resize viewport, it automatically adjust the size when resize.auto option is set. Usually the resize event happens multiple times and to avoid unnecessary resize task happens, it gives a delay of 200ms.

The current resize delay(200ms) using setTimeout()

What if let the ‘resize’ task to be done in browser idle period? Sometimes browser can be more efficient than given time period.

Setting resize.timer=false, will use requestIdleCallback() instead of setTimeout().

Resize using requestIdleCallback()
resize: {
// make to use 'requestIdleCallback()'
timer: false,
}

Also, can control the delay time to call resize tasks by,

resize: {
// trigger resize function on delay of 1000ms
// (default delay is 200ms)
timer: 1000
}

Contributors of this release

Many thanks for the participation and support!

@hjalmers
@neilnaveen
@stof
@ebencollins
@nathannaveen
@neilnaveen

Closing thoughts

billboard.js has been started its journey from forking popular C3.js project.

C3.js project maintenance was unstable, and recently declared stopping the maintenance.

https://github.com/c3js/c3/issues/2866#issuecomment-1129582495

For those who wants migrate from C3.js to billboard.js, checkout the migration guide. Just few steps can easily migrate from it.

Many thanks and applause to C3.js for the works done and the inspiration to billboard.js.

See you on until next release!

--

--

Jae Sung Park

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