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

Aside of the node length, each 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 element work as event receiver.

Reduced node generation

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

Whereas , will generate a single element not based on the x Axis tick.

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 interaction to visualize tooltip for each tick.

v2 (Left) / v2.1 (Right)

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

b) Resizing response

As described above, for each resizing action 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.

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 styling option staring v1.6. And from this release added new ‘datalab’ theme to give another out of box styling option.

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

Checkout from the demo page by selecting 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 , has option to define axis type (indexed, log or timeseries).

v2 brings new 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 type, y2 with and x with type.

log scale to handle 0(zero) value

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

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

By using , this can be improved to handle 0(zero).

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:

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

area: {
front: true | false
}
  • area.front=true (default):
  • area.front=false

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.

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 😍 ~!

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!