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

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.

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?
  • d3.js 6.x+ → billboard.js 3.x+

New Candlestick (OHLC) type

Yes! new candlestick type support added to this release.

Anatomy of candlestick chart (from: The Data Visualisation Catalogue)
// 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",
...
}
};
bb.generate({
data: {
type: "candlestick",
colors: {
data1: "green" // color for 'bullish' value
},
...
},
candlestick: {
color: {
down: "red" // color for 'bearish' value
},
}
}
  • bearish: bb-value-down
  • bearish: the value will be displayed below the shape

.export() API enhancements

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

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

New subchart APIs

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

  • .subchart.hide(): HIde subchart
  • .subchart.toggle(): Toggle the visibility of subchart
New subchart APIs in action!
// 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.

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.

--

--

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
Jae Sung Park

Jae Sung Park

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