billboard.js 2.2.0 release: Gauge enhancements, Pie outerRadius & more!

This release comes with 7 new features added & 18 bug fixes.

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

What’s New?

Another enhancement was added for data label text display. Sometimes is irritating when needs text breaks for SVG text elements.

From this release, when the result text includes \n returned from “data.labels.format” callback, will line break.

Demo: https://naver.github.io/billboard.js/demo/#Data.DataLabelMultiline

data: {
labels: {
format: function(v, id ,i, j) {
return v > 0 ?
"Ipsum is simply dummy text" :
"Lorem Ipsum is simply dummy text";
}
}
}
Image for post
Image for post
Line breaks for data label texts

data.labels.colors option now accepts a callback. For arguments, will be passing the original color string and its data object.

Demo: https://naver.github.io/billboard.js/demo/#Data.DataLabelColors

One use-case example is, when need to apply different color based on the given condition. The below example, will apply “cyan” color value if the data value is greater than 200.

data: {
labels: {
// call back for label text color
colors: function(color, data) {
// color: the default data label color string
// data: ex) {x: 0, value: 200, id: "data3", index: 0}
....
return d.value > 200 ? "cyan" : color;
}
}
}
Image for post
Image for post
Data label text colored as ‘cyan’ for the given condition

With newly added gauge.startingAngle option, can control the starting angle of the Gauge shape.

Demo: https://naver.github.io/billboard.js/demo/#GaugeChartOptions.GaugeStartingAngle

Image for post
Image for post
startingAngle=1 (Left) / startingAngle=-1 (Right)

Simply setting the angle value as follows.

gauge: {
startingAngle: -1
}

gauge.arcLength option will make limiting the length value to be drawn. It can be easily understood from the example screenshot.

Image for post
Image for post
gauge.arcLength=100 (the default) (Left) / gauge.arcLength=75 (Right)

Demo: https://naver.github.io/billboard.js/demo/#GaugeChartOptions.GaugeArcLength

gauge: {
arcLength: 75
}

Gauge type has a background(the grey colored area from the below screenshot) where it makes recognize the full amount of value shape.

If needed to customize its color, .bb-chart-arcs-background rule can be used.
From this release will provide an alternative & straight way for it.

Image for post
Image for post

Set background color value for gauge and that’s all.

gauge: {
background: "red"
}

New pie.outerRadius will bring more flexibility to interpret data using pie.

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

Image for post
Image for post

Apply the outer radius for each or entire data. The radius will make to render each data set different to another.

pie: {
// specify for all data
outerRadius: 100,
// specify for each data
outerRadius: {
data1: 110,
data2: 80
}
}

With the point.opacity option, can control the data point’s opacity value.
Before the support, each data points were forced to have a “default” opacity value according its types. (ex. scatter type, will have 0.5 opacity value)

Image for post
Image for post

This was cumbersome when needed to emphasize or customize data points. All inlined style properties can be overwritten by adding !important rule for style declaration, but isn’t really simple way.

With the new option, easily can control the opacity rule for each data points.

point: {
// do not set inline 'opacity' css prop setting
opacity: null,

// set every data point's opacity value
opacity: 0.7
}

When opacity=null is set, will not add ‘opacity’ inline declaration anymore.

Image for post
Image for post
point.opacity=null

What’s Next?

The dependent module d3 has new major update v6. It was released Aug. of last year and it contains breaking changes (most affected is the dropping support for legacy browsers).

The support for d3v6 has been almost done, but it wasn’t included to 2.2 release. Is mainly to allow billboard.js users to have some migration and adaptation period to prepare.

The d3v6 supported version will be shipped as “billboard.js v3”(planning to be the next release of 2.2), upgrading its major version, because of the breaking changes that d3v6 has.

For more info, checkout the below issue
https://github.com/naver/billboard.js/issues/1641

So, the supported version according d3 version will be as follows.

  • d3 v5: billboard.js v1.x ~ v2.x
  • d3 v6: billboard.js v3+

Thanks as always, and see you at next release! and Stay safe! ❤️

Front-end engineer at NAVER, creator of billboard.js

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