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

What’s New?

Multiline support for data.label

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

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

Callback for data.labels.colors

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

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;
Data label text colored as ‘cyan’ for the given condition

Enhancements for gauge

a) startingAngle

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

startingAngle=1 (Left) / startingAngle=-1 (Right)
gauge: {
startingAngle: -1

b) arcLength

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

gauge.arcLength=100 (the default) (Left) / gauge.arcLength=75 (Right)
gauge: {
arcLength: 75

c) background

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

gauge: {
background: "red"

Outer Radius for pie

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

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)

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

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

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

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



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