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

point.opacity

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

  • 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