What’s New?

Polar chart

Another new way to represent data has been arrived from this release!
The polar type has a lot of similarity with pie, but each segment outer radius differs based on the value and it comes with value levels at the background to facilitate recognition of each segment value easily.

polar type in action
data: {
columns: [
["data1", 60],
["data2", 120],
["data3", 75]
],
type: "polar"
},
// Customizable options for polar type
polar: {
label: {
format: function(value, ratio, id) {
return `${value}\n(${(ratio * 100).toFixed(0)}%)`;
},
ratio: 1.07
},
level: {
depth: 5,
max: 150,
text: {
backgroundColor: "yellow"
}
}
}

Axis range reset dynamically

The axis.range(), axis.max/min() APIs, provides the ability to update axes min/max values dynamically. But it wasn’t provided the way to reset to default.

Dynamically update axes min/max value and reset
chart.axis.min({
x: false,
y: false,
y2: false
});

// shorthand
chart.axis.min(-100); // will set min of y/y2 as -100
chart.axis.min(false); // will unset min of y/y2

chart.axis.max({
x: false,
y: false,
y2: false
});

// shorthand
chart.axis.max(1000); // will set max of y/y2 as 1000
chart.axis.max(false); // will unset max of y/y2

chart.axis.range({
min: {
x: false,
y: false,
y2: false
},
max: {
x: false,
y: false,
y2: false
},
});

// shorthand
chart.axis.range({
// shorthand, which sets min of y/y2 as -100, max of y/y2 as 10000
min: -100,
max: 10000,

// shorthand, which unset min & max of y/y2
min: false,
max: false
});

onclick option

Simple, but useful new onclick option has been added. The handler callback function is called whenever “click” event occurs on entire chart element area.

onclick handler triggered from the user click interaction
bb.generate({
...,
// will be called when chart area
// (somewhere of entire svg element) is clicked
onclick: function(event) {
this; // chart instance itself
event; // native event object
}
});

Closing thoughts

We’re growing slow but steady way! We reached 1M downloads!!! 🎉 🎊 since the initial release, and the download numbers soars gradually.

GitLens: Visual File History

--

--

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