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

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

TL;DR

  • new candlestick(OHLC) type support
  • .export() API enhancements
  • new subchart APIs

D3.js v6 Support

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

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

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

Added 3 new methods to control:

  • .subchart.show(): Show subchart
  • .subchart.hide(): HIde subchart
  • .subchart.toggle(): Toggle the visibility of subchart
New subchart APIs in action!

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

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!

Kamil Michalski

Marc Faber

What’s Next?

So. stay tuned until the next release!

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