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

TL;DR

D3.js v6 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?

New Candlestick (OHLC) type

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

.export() API enhancements

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

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

Announcing new billboard.js project members!

Kamil Michalski

Marc Faber

What’s Next?

--

--

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