billboard.js 3.1 release: subchart & data loading enhancements!

What’s New?

Contain inline css props

  • opacity: 1
  • visibility: “visible”
  • display: “block”
Inlined ‘opacity:1’ (bottom screenshot) removed from the elements(top screenshot).

subchart.init.range

subchart: {
enabled: true,
init: {
// specify initial range domain selection
range: [2, 4]
}
}
Example screenshot of initial subchart range.

subchart.showHandle

subchart: {
show: true,
showHandle: true
}

Data load append option

// Given chart
const chart = bb.generate({
data: {
x: "x",
xFormat: "%Y-%m-%dT%H:%M:%S",
columns: [
["x", "2021-01-03T03:00:00", "2021-01-04T12:00:00", "2021-01-05T21:00:00"],
["data1", 36, 30, 24]
]
},
axis: {
x: {
type: "timeseries"
}
}
});

// load new data
chart.load({
columns: [
["x", "2021-01-13T08:00:00", "2021-01-15T08:00:00"],
["data1", 37, 40]
]
1});
When .load() is called, the current dataset is replaced by the new loaded data.
// load new data by appending it.
chart.load({
columns: [
// when existing chart has `x` value, should provide
// corresponding 'x' value.
// with 'append' option, the 'data1' will have `[36,30,24,37, 40]`.
["x", "2021-01-13T08:00:00", "2021-01-15T08:00:00"],
["data1", 37, 40]
],
append: true
});
With ‘append’ option, will append the new dataset to the current.

data.onshown/onhidden

data: {
onshown: function(ids) {
console.log("data shown:", ids);
},
onhidden: function(ids) {
console.log("data hidden:", ids);
},

}

data.labels.backgroundColors

data: {
labels: {
backgroundColors: "yellow",
// or specify colors for each dataseries.
backgroundColors: {
data1: "green",
data2: "rgba(0, 0, 0, 0.2)"
}
}
}

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

How to render different components based on screen size

SIP and Basics

How I add <Button> to theXMars UI

Socket.IO Session Handler for Node.js

JavaScript Algorithm: Array.diff

40 Portfolio Templates Free For Web Design

Redis Caching VS Cloudflare page rules — NodeJS

Making a post slider in Eleventy with Tailwind

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

Sharing Web UI Across Tableau’s Browser Client and Desktop Application

Neo4j with graphql end to end flow

billboard.js 3.3 release: Non-zero based bar, stacking bar radius & more!

Using TomTom Data via APIs to Improve Delivery ETA Accuracy