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

What’s New?

Interaction improvement

The root cause of performance bottleneck

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

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.

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

axis.y2.type

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

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

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.

y Axis tick number starting from 0(zero).

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

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'>
.bb-area {opacity: 1;}
.bb-line {stroke: red !important;}
.bb-circle {
stroke: #000 !important;
fill: #000 !important;
}
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.

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

--

--

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