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

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 4.x ~ 5.x → billboard.js 1.x ~ 2.x
  • d3.js 6.x+ → billboard.js 3.x+

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
},
}
}
  • bullish: bb-value-up
  • bearish: bb-value-down
  • bullish: the value will be displayed above the shape
  • bearish: the value will be displayed below the shape

.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

  • .subchart.show(): Show subchart
  • .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

Announcing new billboard.js project members!

Kamil Michalski

Marc Faber

What’s Next?

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

NGRX — from the beginning, part I

CS373 Spring 2021: William Wang

From UI Design to Mobile App

Mongoose Beginner Guide

How to improve load times with Intersection Observer

IMPROVE YOUR WEB SITE PERFORMANCE WITH ASYNC AND DEFER ATTRIBUTES

Bite-size JavaScript Functions for OutSystems Development — Part 1

Visual Studio Code Extensions For Front-End Developers

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

More from Medium

billboard.js 3.4 release: new polar chart!

How to Build a Neo4j Application with Node.js

Dynamically bundle i18n file in shared UI component based on current locale

The Best Collected Details on the GraphQL Specification — Overview & Language