billboard.js 1.11.0 release: Lazy render, new TextOverlap plugin & more!

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

What’s New?

Demo: https://naver.github.io/billboard.js/demo/#ChartOptions.LazyRender

Lazy Rendering in action
// (1) Initial state
<div id='chart' style='display:none'></div>
// (2) Generate chart as usual, but it won't be rendered until '#chart' element visibility change automatically.
const chart = bb.generate({
bindto: "#chart",
...
});
// (3) Update the visibility to make chart to be rendered
document.getElementById('chart').style.display = 'block';
render: {
lazy: true, // Make to not render at initialization
observe: false // Observe bind element's visibility
}

Demo: https://naver.github.io/billboard.js/demo/#Plugins.TextOverlap

(Left) Normal positioning / (Right) TextOverlap Plugin applied
const chart = bb.generate({
data: {
columns: [ ... ]
}
...
plugins: [
new bb.plugin.textoverlap({
// selector for data label text nodes
selector: ".bb-texts text",
// extent of label overlap prevention
extent: 8,
// minimum area needed to show a data label
area: 3
})
]
});

Demo: https://naver.github.io/billboard.js/demo/#DonutChartOptions.StartingAngle

pie’s startingAngle option
donut: {
startingAngle: 0.7
},
pie: {
startingAngle: 1
},

Demo: https://naver.github.io/billboard.js/demo/#Axis.MultiAxesDomain

x Axes with domain option and y Axes without.
[x|y|y2]: {
axes: [
{
// set new domain value
domain: [0, 1000],

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

Different data label text position for each data
position: {
data1: {x: 5, y: 5},
data2: {x: 10, y: -20}
}

Demo: https://naver.github.io/billboard.js/demo/#ChartOptions.Background

Image background and colored background
background: {
class: "myClass",
color: "red",
// Set image url for background.
// If specified, 'color' option will be ignored.
imgUrl: "https://naver.github.io/billboard.js/img/logo/billboard.js.svg",
}
data: {
onover/out: function(d, element) {
// d - ex) {x: 4, value: 150, id: "data1", index: 4}
// element - <circle>
...
}
}
The display of one data only and stack data

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