billboard.js 3.0 release: D3.js v6 support & new candlestick type!

5 min readMar 26, 2021

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

TL;DR

the major version changes is mainly to support for D3.js v6
new candlestick(OHLC) type support
.export() API enhancements
new subchart APIs

D3.js v6 Support

D3.js major release v6 came out August of 2020, with some breaking changes.

We were working for the adoption and heard feedbacks from the community.
https://github.com/naver/billboard.js/issues/1641

After some months of works, we could achieve the goal to support D3.js v6!

The main reason for major version changes of 2.x → v3 is due to the changes of D3.js, where it needs in user context to add extra handling for older browser support.

Note: As of D3.js v6 adoption of ES2015(ES6), when is needed to maintain older browser compatibility need transpile D3.js codes.For more details, checkout below link:
How to bundle for legacy browsers?

Here’s the support table by D3.js versions:

d3.js 4.x ~ 5.x → billboard.js 1.x ~ 2.x
d3.js 6.x+ → billboard.js 3.x+

2.x will not have any updates, except for critical bugs.
Our recommendation is to upgrade to billboard.js v3 to get continuous updates and being beneficial for the new coming features.

New Candlestick (OHLC) type

Yes! new candlestick type support added to this release.

Candlestick(or OHLC: Open High Low Close) chart is typically used to illustrate movements in the price(stock market) over time.

Anatomy of candlestick chart (from: The Data Visualisation Catalogue)

The basic outline options values for canldlestick type is as follows.

// for ESM import usage:
import {candlestick} from "billboard.js"bb.generate({
   data: {
      type: candlestick(),
      columns: [
          ["data1", 
            // open, high, low, close, volume(optional)
            [1000, 1100, 850, 870, 100],            // or object with 'ohlc' & 'volume'(optional) key value
            {open:1000, high: 1100, low: 870, volume: 100}
          ]
      ]
   }
    candlestick: {
       // color for 'bearish' value
       color: {
          down: "red"
       },       // control the width of candlestick shape
       width: {
          data1: 20,
          data2: {
             ratio: 0.2,
             max: 20
          }
       }
    }
};// for script build usage:
bb.generate({
   data: {
      type: "candlestick",
      ...
   }
};

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

As the characteristic of candlestick type, each data values are represented as bullish(when the price closed in high value, than the opening) or bearish(when the price closed in lower value, than the opening), they needed to be rendered in different colors to distinguish.

The colors for both values types can be controlled by following options:

bb.generate({
    data: {
        type: "candlestick",
        colors: {
            data1: "green"  // color for 'bullish' value
        }, 
        ...
    },
    candlestick: {
       color: {
            down: "red"  // color for 'bearish' value
       },
    }
}

And also for those who needs to control each node elements by value type, class name will be set.

bullish: bb-value-up
bearish: bb-value-down

Data labels will be shown by value type and will display closevalue, as shown as in the above screenshot:

bullish: the value will be displayed above the shape
bearish: the value will be displayed below the shape

.export() API enhancements

From this release, .export() works to export to given image size.

Demo: https://naver.github.io/billboard.js/demo/#API.Export

For example, if the chart generated has 250x150 size and want to export to 800x600, specify size values options as follows.

chart.export(
  // export options
  {
    width: 800,
    height: 600,
    preserveAspectRatio: true,
    mimeType: "image/png"
  },// callback fucntion
  dataUrl => { ... }
);

As a result, the small sized chart will be exported in more bigger size without damaging the image quality.

The preserveAspectRatio will make to preserve or not the aspect ratio.

chart.export(
  // export options
  {
    width: 500,
    height: 100,
    preserveAspectRatio: false,
    mimeType: "image/png"
  }
);

Setting to false, will export an image as the given size, but not preserving the aspect ratio.

New subchart APIs

Last feature added is subchart APIs. These new APIs will make to control the visibility of the subchart programatically.

Added 3 new methods to control:

.subchart.show(): Show subchart
.subchart.hide(): HIde subchart
.subchart.toggle(): Toggle the visibility of subchart

Very simple to use, but when is used from ESM imports, subchart module must be imported first.

// for ESM imports, needs to import 'subchart' and must be instantiated first to enable subchart's API.
import {subchart} from "billboard.js";const chart = bb.generate({
   ...
   subchart: {
     // (1) need to be instantiated by calling 'subchart()'
     enabled: subchart()     // (2) in case don't want subchart to be shown at initialization, instantiate with '!subchart()'
     enabled: !subchart()
   }
});

Efforts to make beneficial to all

billboard.js project started in 2017, forking the C3.js v0.4.11.

Why we decided to start billboard.js?

Since then, we worked very hard to fulfill everyone’s necessities adding new functionalities and evolving following these days techs environments.

Recently we noticed continuity of C3.js, where users expressing some concerns about it.

To get rid concerns of C3.js communities and to make stronger the legacy of the project, we proposed to C3.js project members to “unify the efforts” to billboard.js project.

Open Letter: Dear C3.js & the community from billboard.js

Let’s OSS projects continue without the worries of the sustainability and discontinuity!

Announcing new billboard.js project members!

Really excited to announce, two new members joining to this project.

Kamil Michalski

Kamil has been contributed several new features like, Multi Gauge Type, several new features and bug fixes.
The contributions made helped a lot to make billboard.js being more functional and stable.

Marc Faber

Marc was member of C3.js project and we proposed to join billboard.js.
Surely, the experience of C3.js, will make to evolve this project.

What’s Next?

Our mission is to fulfill users necessities helping to visualize data on the web providing an easy way.

So. stay tuned until the next release!