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

For the detailed release info, please checkout the release note:
https://github.com/naver/billboard.js/releases/tag/3.1.0

What’s New?

Inlined ‘opacity:1’ (bottom screenshot) removed from the elements(top screenshot).
subchart: {
enabled: true,
init: {
// specify initial range domain selection
range: [2, 4]
}
}
Example screenshot of initial subchart range.

Demo: https://naver.github.io/billboard.js/demo/#Interaction.SubChart

subchart: {
show: true,
showHandle: true
}

Ref. How behaves for dynamic loading?

// 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: function(ids) {
console.log("data shown:", ids);
},
onhidden: function(ids) {
console.log("data hidden:", ids);
},

}

Demo: https://naver.github.io/billboard.js/demo/#Data.DataLabelColors

Note: If specifies color value using rgba, can control the opacity for background color.

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

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