The chart library: billboard.js 1.8.0 released today!

What’s New from the release?

Let’s change color when is over!

To indicate current data selection, vertical focus line is well enough in all circumstances. But sometimes you want to emphasize to show clear indication applying some color changes at chart elements(when it goes to mobile environment, this can be more useful because of the touch based interaction).

color.onover in action
// set all data to 'red'
onover: "red",
// set different color for data
onover: {
data1: "red",
data2: "yellow"
},
// will pass data object to the callback
onover: function(d) {
return d.id === "data1" ? "red" : "green";
}

Full display control for axis tick

In most circumstances, axis are shown as is, but sometimes there’re needs to customize the display of each parts.

Tick composition

x: { // same for 'x', 'y', 'y2' and subchart axis
tick: {
show: true, // show or hide tick lines
text: {
show: true // show or hide tick texts
}
}
}

Variant width on bars

Usually bar elements are visualized with the same width, but having different width size can give different visualization experience to be distinguished one from others.

Applied different width value for each dataset
bar: {
width: {
data1: {
ratio: 0.2,
max: 20
},
data2: 30
}
}

Multilined text

Adding break lines are quite annoying task in SVG. To facilitate, billboard.js added functionality to break the line using ‘\n’ char where is applicable.

  • Multine text enhancement for Pie/Donut
pie: {  // donut also as well
label: {
format: function(value, ratio, id) {
return value +"\nHours";
}
}
}
  • Multilined Text
Multilined title
title: {
text: "Temperature History by Region, 2017-2018\nSource: community weather center"
}

LinearGradient for Area types

Background gradient is one design/UX factor to display area type charts. To accomplish this, added new area.linearGradient option.

// will generate follwing linearGradient:
// <linearGradient x1="0" x2="0" y1="0" y2="1">
// <stop offset="0" stop-color="$DATA_COLOR" stop-opacity="1"></stop>
// <stop offset="1" stop-color="$DATA_COLOR" stop-opacity="0"></stop>
// </linearGradient>
linearGradient: true,
Customized linearGradient
// Or customized gradient
linearGradient: {
x: [0, 0], // x1, x2 attributes
y: [0, 0], // y1, y2 attributes
stops: [
// offset, stop-color, stop-opacity
[0, "#7cb5ec", 1],
// setting 'null' for stop-color, will set its original data color
[0.5, null, 0],
// setting 'function' for stop-color, will pass data id as argument.
// It should return color string or null value
[1, function(id) { return id === "data1" ? "red" : "blue"; }, 0],
]
}

Improved performance

Performance is one of the main key to be considered. We were putting efforts on these, but it can not be done all at once.

  • Do not generate unnecessary nodes if they aren’t necessary.
  • Get rid the duplicated calls to minimize execution calls.
  • Memoize some dimension values to not evaluate multiple times.

Small benchmark

We did some small benchmark to measure the difference and here are the results.

Test condition:
- Total of 30 datasets, which each has length of 30 data
The resources(CPU, JS heap size and DOM Nodes) values aren't really accurate, just take as a consideration.
Performing dynamic load via .load()
  • v1.7.1: 33~42/sec
  • v1.8.0: 16 ~ 24/sec
Performing dynamic resize via .resize()
  • v1.7.1: 51~66/sec
  • v1.8.0: 12 ~ 39/sec

Small tip

One best way to improve the performance is turning-off the transition. Is kinda obvious, but just one setting will mitigate the cost of rendering.

transition: {
duration: 0 // or null
}

Closing

I’d like to address thanks to all users and the contributors. And hope these efforts let facilitate on your tasks!

--

--

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