Excited to share another new one
3.5 release 🥳!. This release comes with 5 new features and 16 bug fixes.
For the detailed release info, please checkout the release note:
From this release, adds two new options to boost the performance.
This option lets remove as possible inlined style values from the generated node elements.
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 increase 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 you remove these definitions from the nodes, obviously it 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.
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.
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, you can move up the page to become interactive earlier.
Simple turn on as below.
Did a simple benchmark(w/Chart.js), giving a situation to display 50 data series, each one having 50 data values (2,500 data in total).
Here’s the result table.
data.labels.rotate option will “rotate” data labels text.
Just give degree value(in a range of 0~360), on how the text will be rotated.
rotate: 90 // 90 degree
The ‘area’ type will render covering background according to the value. When the values go in a range of negative and positive values, the background area will be based on zero as follows.
What if you want the backgrounds to be rendered on one side?
area.above option, which makes the background to be rendered above the lines. But not in the opposite way.
From this release, added
above.below option to make backgrounds area to be rendered “below” the lines.
When resize viewport, it automatically adjusts 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.
What if let the ‘resize’ task to be done in browser idle period? Sometimes browser can be more efficient than given time period.
resize.timer=falsewill use requestIdleCallback() instead of setTimeout().
// make to use 'requestIdleCallback()'
Also, can control the delay time to call resize tasks by,
// trigger resize function on delay of 1000ms
// (default delay is 200ms)
Contributors of this release
Many thanks for the participation and support!
billboard.js has started its journey from forking the popular C3.js project.
C3.js project maintenance was unstable, and recently declared stopping the maintenance.
For those who want to migrate from C3.js to billboard.js, check out the migration guide. Just a 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 the next release!