billboard.js 1.5.0 released today!

Super excited to announce the new release of billboard.js today!

Added 7 new features and a lot of bug fixes, and I’m sure this is an one another step forward to make an improved library.

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

What’s new?

The new Radar type

A long waited ‘radar’ type support has been added from this release. You can see the working demo on below link.

Different radar types

To use ‘radar’ type, just simply set data.types option value. (currently has no support for separate type indication using data.type option)

bb.generate({
data: {
x: "x",
columns: [
["x", "Data A", "Data B", "Data C", "Data D", "Data E"],
["data1", 330, 350, 200, 380, 150]
],
type: "radar", // that's all!
}
});

Also, there’re several useful new options for radar type, which can help customize to get different variation of the data visualization.

As being an initial support, there’re possible incompatibility with other options. These will be fixed along with future releases.

axis.[x|y|y2].tick.text.position

Usually tick’s texts position doesn’t necessarily being manipulated, but there’re moments(mostly for designing purposes) to do so.

Let’s assume you want display y axis to be positioned inside of the data area. And want to make every grids indicating each data amount steps.

tick’s text position before applying option (left) / after (right)

Setting each tick’s text position is really easy. Just set position pixel for x and y coordinate value. Every value is treated relatively as the original position.

axis: {
y: {
tick: {
text: {
position: {
x: 10, // original x position + 10px
y: 10 // original y position + 10px
}
}
}
}
}

These can give a variety way to customize and use axes tick’s text value.

axis.[x|y].clipPath

This new options can be used along with tick’s text position option.

Usually the axes elements are clipped to not surpass the actual axes area and these are implemented by the clip-path attribute.

But when you need implement an rotated bar using x axis value coordinated on each data bars like the example below, the tick texts aren’t visible due to the clip-path attribute.

This is the moment for axis[x|y]. clipPath option comes to play.

axis: {
x: {
clipPath: false // will not set 'clip-path' attribute
},
y: {
clipPath: false // will not set 'clip-path' attribute
}
}

Improved lining for x axis

Do you have struggled to display x axis category texts properly? By default, axis.x.tick.multiline option is set.

It will adjust x axis text’s line automatically, but it doesn’t look nicely and is also unexpected determine the exact new line will happen.

Automatic multiline for x axis text

To mitigate, there is axis.x.tick.width and axis.tick.rotate options, but none of these are effective if you want get exact lining.

This is the reason of the implementation. Give user to line on exact position they want.

When you bind the category names for data, just put \n character where you want to be lined and that’s all.

data: {
columns: [
["x",
"www.somes\nitename1\n.com",
"www.\nsomesitename2\n.com",
"www.somesitename3\n.com",
"www.\nsomesitename4.com",
"www.somesitename5\n.com"
],
["pv", 90, 100, 140, 200, 100]
],
}

And see what it looks likes. There’s no more headaches doing some width calculation.

Specified multiline of x axis text

tooltip.linked.name

tooltip.linked option was added since 1.4.0 release. This was giving an opportunity of interaction among charts generated within a same context.

The new tooltip.linked.name let group linked charts. When is indicated, the ‘linking interaction’ will work for the same name groups only.

var chart1 = bb.generate({
...
tooltip: {
linked: {
name: "link01" // will be linked with the 'link01' name group
}
}

var chart2 = bb.generate({
...
tooltip: {
linked: {
name: "link02" // will be linked with the 'link02' name group
}
}

var chart3 = bb.generate({
...
tooltip: {
linked: {
name: "link01"
}
}


var chart4 = bb.generate({
...
tooltip: {
linked: {
name: "link02"
}
}

Checkout the example in action. There’re 4 charts with two different name groups and they’re interacting only with the same linked name value.

linked tooltip with grouped name

What’s Next?

A year ago, released the first version of billboard.js.

Maybe it was slow for some, but I want define as a steady year adopting and implementing new features for users.

The rough plan for the next release are:

  • Multiple Axes
  • Themed CSS file

and more!

Hope these updates be useful and stay well until the next release!

Like what you read? Give Jae Sung Park a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.