billboard.js 1.3.0 is released today!!✨

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

https://github.com/naver/billboard.js/releases/tag/1.3.0

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.

https://naver.github.io/billboard.js/demo/#Chart.AreaRangeChart

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.

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.

https://naver.github.io/billboard.js/demo/#PieChartOptions.Padding

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

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.

https://naver.github.io/billboard.js/demo/#PieChartOptions.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.

https://naver.github.io/billboard.js/demo/#Legend.usePoint

With the conjunction of legend.usePoint option, let 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.

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

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).