billboard.js 3.2 release: Sparkline, TableView Plugins & more!

What’s New?

axis.x.padding.unit

To make chart shape area have some padding to each side was possible, but the value wasn’t treated as pixel. The padding value was based on the x Axis type format, which means, when x Axis type is “timeseries”, the padding should be based on time value, and so on for other formats.

axis: {
x: {
padding: {
left: 1, // 1 equivalent as current chart's tick space
right: 1
}
}
}
axis: {
x: {
padding: {
left: 100,
right: 50,
unit: "px"
}
}
}

Error logging enhancement

As of ESM module introduced since v2, it needed load and specify shape modules correctly. If not specified, will throw error with required method isn't a function. (Ref. #2299)

Uncaught TypeError: $$.generatePoint is not a function
at ChartInternal.push../node_modules/billboard.js/dist/billboard.esm.js.ChartInternal.initParams (billboard.esm.js:7782)
at ChartInternal.push../node_modules/billboard.js/dist/billboard.esm.js.ChartInternal.init (billboard.esm.js:7727)
at new Chart (billboard.esm.js:9310)
at Object.generate (billboard.esm.js:19681)
at chart3 ([name].js:146)

line.step.tooltipMatch

The new tooltipMatch option for step types, will make tooltip appearance attached to the corresponding x tick’s position.

line: {
step: {
type: "step-after",
tooltipMatch: false
}
}
tolltipMatch=false
line: {
step: {
type: "step-after",
tooltipMatch: true
}
}
tolltipMatch=true

Dual CJS/ESM package support

CommonJS style and ESM where used to export modules within the package. This was some kind of band aid solution, because the standard way is exporting as ESM.

// package.json
{
"name": "billboard.js",
...
"type": "module",
"exports": {
".": {
"import": "./dist-esm/billboard.js",
"require": "./dist/billboard.pkgd.js"
},
"./dist/plugin/*": {
"import": "./dist-esm/plugin/*.js",
"require": "./dist/plugin/pkgd/*.js"
},
"./dist/*": "./dist/*"
},
}

Sparkline Plugin

Sparkline plugin will make to generate multiple tiny charts from the single generation.

bb.generate({
size: {
width: 150,
height: 50
},
data: {
columns: [
["data1", 130, 200, 150, 140, 160, 150],
["data2", 200, 130, 90, 240, 130, 220],
["data3", 300, 200, 160, 400, 250, 250],
...
],
},
plugins: [
new bb.plugin.sparkline({
selector: ".sparkline" // specify sparkline holder
})

]
});

TableView Plugin

The new TableView plugin will generate table view from the given chart data series. It provides some simple options to control the visibility of the tables.

bb.generate({
...
plugins: [
new bb.plugin.tableview({
selector: "#my-table-view",
categoryTitle: "Year",
categoryFormat: function(v) {
// do some transformation
...
return v;
},
class: "my-class-name",
style: true,
title: "My Data List",
updateOnToggle: false
}),

]
});

subchart.x.tick.format

Allows for the subchart x axis tick format to be different from the x axis tick format of the primary chart.

subchart: {
show: true,
axis: {
x: {
tick: {
format: "%Y-%m-%d"
}
}
}
},
subchart tick text format

Facilitate control tooltip position

Pass position object argument to tooltip.position callback to facilitate tooltip position value control.

tooltip: {
position: function(data, width, height, element, pos) {
// data: [{x, index, id, name, value}, ...]
// width: Tooltip width
// height: Tooltip height
// element: Tooltip event bound element
// pos: {
// x: Current mouse event x position,
// y: Current mouse event y position,
// xAxis: Current x Axis position
// }
return {
top: pox.y,
left: pox.xAxis
}
}
}

Make consist transitions

To control transition, transition.duration option is used specifying the corresponding duration value. But this didn’t applied on every occasions.

Transition on prior v3.2(left), and v3.5(right)

What’s Next?

The planned next and last release for 2021 will be Dec. As always, we will be working to implement and enhance new functionality to bring ease data visualization on web platform.

--

--

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