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

What’s New?

axis.x.padding.unit

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

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

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

Dual CJS/ESM package support

// 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

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

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

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

Facilitate control tooltip position

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

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

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

Another 10 Quick TypeScript One-Liners

do something great

Word Ladder — BFS

Javascript + React: Protecting the DOM from Scammers who Mutate Content with Devtools

Photo by Anna Shvets from Pexels

JavaScript In Top Industries

Node.JS Explained Raw…

The Sublime Atom Switch

Callback in Node.js

CS373 Spring 2021: Blog #6

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

Everything You Need To Know About S3 Serverless Uploads using Boto3

Creating Interactive Maps Using Leaflet

Configuring Cognito’s Hosted UI with a Custom Resource in CDK + Python

Configuring APIGateway VTL to store JSON object directly on S3 —With Lambda authorizer enabled