billboard.js 1.3.0 is released today!!✨

Jae Sung Park
5 min readMar 15, 2018

--

I’m happy to announce the new release of the billboard.js today! With this first release of 2018, comes 7 new features and 14 bug fixes.

You can find the detailed release note on the below link

If there’s no issue, the release period of billboard.js is done on every 3 months.

What’s new?

2 new area range types

Area-range is the new type to visualize each data in conjunction with the high and low value.

As you can see from the example below, the ‘ranged’ line(or spline) are rendered with the transparent area which is the representation of the high/low values.

new area-line-range chart

To use ‘ranged’ types, the data should be bound differently than the others. It should contain ‘low/mid/high’ values together. The values can be represented as Array or Object.

// as Array
["data1",
[120, 70, 0], // in the order of: high / mid / low
[175, 130, 115],
[180, 135, 120],
[155, 120, 110],
[200, 150, 130],
[229, 160, 125]
],

// as Object
['data1',
{high: 195, low: 125, mid: 150},
{high: 200, mid: 190, low: 150},
{high: 230, mid: 215, low: 200},
{high: 210, mid: 200, low: 180},
{high: 220, mid: 210, low: 190},
{high: 200, mid: 180, low: 160}
]

Here’s the complete generation example.

bb.generate({
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2",
[120, 70, 0],
[175, 130, 115],
[180, 135, 120],
[155, 120, 110],
[200, 150, 130],
[229, 160, 125]
]
],
types: {
data2: "area-line-range"
}
}
})

pie.padding

Padding lets give ‘padding’ between the data.

Unlinke the pie.padAngle, padding gives equal spaces. You can notice clearly from the below example.

Pie’s padAngle(left) & padding(right)

The usage is very simple and straight forward. Set value for each options, but bear in mind that both options can’t be used at same time.

pie: {
padAngle: 0.1,
padding: 20
},

pie.innerRadius

Donut type can be defined as modified version of pie with big inner circle.

But, there’re demands on having small or bigger inner circle for different purposes(IMO in most cases for design).

So, to fulfill, newly added option came out. It let adjust inner circle on pie.

Pie’s innerRadius
pie: {
innerRadius: 20
},

legend.usePoint

On the last release, we introduced ‘Customized data points’. It was really nice feature which let create a customized data points.

With the conjunction of legend.usePoint option, let display custom data points on legend.

Display custom data points on legend
legend: {
usePoint: true
},

axis.x.tick.tooltip

This is a small feature, which let show system tooltip for x Axis tick texts. It only works for desktop environment.

System tooltip on x tick texts
axis: {
x: {
tick: {
tooltip: true
}
}
},

bb.instance

Another small feature added is bb.instance. It returns an array value containg the created instances within a page.

It facilitate to distinguish handling instances if you have more than one chart generated.

// generate charts
var chart1 = bb.generate(...);
var chart2 = bb.generate(...);
bb.instance; // [ chart1, chart2, ... ]

Improved the test coverage!

What’re the biggest decision making to opt using open source?

As most will agree, the stability is the most matters. So, we do.

When billboard.js was started at June 2017, the initial coverage was 73%. That’s not bad, but not enough to guarantee the quality of the codes from the new changes happened.

Increasing the coverage was the one of the willing point from the beginning, but it wasn’t easy. It needed to organize test codes structures first and so on.

This isn’t something that users can notice clearly from the release, but personally I’m really glad on 10%! increase of the coverage.

Test coverage histogram from coveralls.io

This will give more relieve in terms of developing and stabilities to end users.

Hope this under the hood efforts give positive affects 😍

Current status

Downloads

Every week 700+ downloads happens. This means on average 100 downloads every day. Wow!!

Downloads stats from npm-stat.com from the last release (15th, Dec. 2017)

Projects

There’re appearance of projects based on billboard.js.

Like just-dashboard is the awesome work by github/@kantord, is the online service letting create chart(dashboard) using YAML/JSON hosted from GitHub’s gist(or you can make your own system).

https://kantord.github.io/just-dashboard/

The project got a lot of attention and reached 1.2K stars! This is the one of the strong evidence of the increase of the communities(or users).

If you want to know more, check out the curated list.

If you’re using billboard.js, please let us know. We’re finding new references!

StackOverflow

Did you know that? It was added ‘billboard.js’ tag on StackOverflow!

If you need some help, try find some on using billboard.js tag.

Requests for help

Contributors!

On this 1.3.0 release was made by with the efforts from these contributors!

github/@julien, github/@rshingleton and github/@matthiaskomarek

Thanks again for the efforts made. I’m sure that this efforts will help a lot of users out there!

Beside of that, we still needs more helps from the community. Hope having more attention and more participation.

What’s next?

Of course, we’ll continuing our journey. The next release will be expected to be June.

The rough plans for the next release are:

  • Support on coming d3.js v5
  • new chart types

Your attentions are the source to continue this journey!!! Hope to stay well until the next release. See ya~!

--

--