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

4 min readJan 26, 2021

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?

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.

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

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.

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

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.

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

startingAngle=1 (Left) / startingAngle=-1 (Right)

Simply setting the angle value as follows.

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)

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

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.

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.

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

gauge: {
    background: "red"
}

Outer Radius for pie

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

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

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

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)

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.

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