billboard.js 2.1.0 release: Another big step for performance improvement & more!

This release comes with 6 new features added & 12 bug fixes.

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

What’s New?

Interaction improvement

The root cause of performance bottleneck

Previously for each dataset based on x Axis, an event receiver node <rect class=' bb-event-rect'> is generated to handle user's event.

But when needs to render big amount of dataset, this is the main root cause of performance bottleneck.

Image for post

Aside of the node length, each <rect> nodes got updated(positions and sizes) on every resize to make handle user’s event correctly.

So, getting rid these event handling approach, will definitely make a huge performance improvements.

The starting point is making to generate only one single <rect> element work as event receiver.

Reduced node generation

Prior v2.1.0, event <rect> elements are generated relatively of the x Axis ticks. That means, if there're 1k x Axis tick, it will generate 1k <rect> nodes.

Whereas v2.1.0, will generate a single <rect> element not based on the x Axis tick.

Image for post
v2 generate multiple event <rect> elements (Left) / v2.1 generate a single event <rect> element (Right)

Interaction responsive tests

Note that in real use case scenario, will work more faster than the below benchmark test, but for test purpose opening the devtool will add some throttling on execution.

Used 1000 x 5 matrix sample dataset for the test and opened FPS meter to visualize frames per second.

a) Tooltip response

The below sample renders 1k ticks. And it shows a clear differences of the response performance when do a mousemove interaction to visualize tooltip for each tick.

Image for post
v2 (Left) / v2.1 (Right)

For multiple <rect> node structure, the tooltip isn’t responding immediately following the mouse cursor’s position, whereas the single <rect> node structure’s response is close to an immediate response.

b) Resizing response

As described above, for each resizing action <rect> element’s dimension needed to be updated according the chart get resized.

Is logical to think what will be more performant. Updating 1k length node elements vs a single node element.

The result shows clearly on how chart react from the resizing.

Image for post
v2 (Left) / v2.1 (Right)

There’s no need to update any of your code. Just upgrade your billboard.js to v2.1, and you’ll get the performance benefit!

New Theme: datalab

The beneficial for SVG based rendering is giving a flexibility for styling and handling each chart element if the library doesn’t fit on you.

billboard.js introduce Theme styling option staring v1.6. And from this release added new ‘datalab’ theme to give another out of box styling option.

Image for post
Color patterns used for new ‘datalab’ theme
Image for post
Combination chart with ‘datalab’ theme

Checkout from the demo page by selecting datalab theme from the top-left selectbox to see in action.

For all themes color pattern and some screenshot, checkout:
https://github.com/naver/billboard.js/wiki/Themes

axis.y2.type

Each axes, except y2, has option to define axis type (indexed, log or timeseries).

v2 brings new axis.y2.type option to make aligned with other axes, and adding another more option for customization.

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

axis: {
x | y | y2: {
type: "category" | "indexed" | "log" | "timeseries"
}
}

The screenshot below, shows y Axis with log type, y2 with indexed and x with log type.

Image for post

log scale to handle 0(zero) value

From the support of the log type axis(since v2) based on the logarithmic rules, 0 can't be expressed in axis values, because log 0 is undefined.

But, in majority of real use cases, the real datas are expressed with natural numbers including 0.

By using bi-symmetric log transformation, this can be improved to handle 0(zero).

Image for post
y Axis tick number starting from 0(zero).

This update will applied automatically without any option value changes.

area.front

When area type is used, the related node is generated in follow stacking orders:
<g class='bb-lines'><g class='bb-areas'><g class='bb-circles'>

Image for post

The new area.front option will let control the stacking order between lines and areas.

area: {
front: true | false
}
  • area.front=true (default):
    <g class='bb-lines'><g class='bb-areas'><g class='bb-circles'>
  • area.front=false
    <g class='bb-areas'><g class='bb-lines'><g class='bb-circles'>

So, what this option could do? Well, in most cases it can be used to adjust detailed styling as follows.

.bb-area {opacity: 1;}
.bb-line {stroke: red !important;}
.bb-circle {
stroke: #000 !important;
fill: #000 !important;
}

When above styles applied, it needs to bring line element to the front of area to make a clear visible rendering.

The left side screenshot shows when line is positioned behind the area, and the right side shows when line is positioned over the area.

Image for post
area.font=true (Left) / area.front=false (Right)

Plugin class for JS/TS

Due to the codebase migration from JS based to TS, every source code is written in TS.

For those relayed on writing own Plugin code based on JS, this can be problematic and hassle.

To get rid this, simply added JS version of Plugin class file and included it to the distribution npm package.

If you need to write own plugin, just import the JS version by:

import Plugin from "billboard.js/src/plugin/Plugin.js";

What’s Next?

Since the first release in 2017, the download numbers gradually increased. Is not a “bloating” growth, but I’m glad to see more users each day. Thanks all the communities for this 😍 ~!

Image for post

The next release is expected to be on Dec, and as always trying adding new excited features & improvements where can be beneficial to all.

Hope you stay safe from the COVID-19 😷, healthy and well.
See you until next release!

Written by

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

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