billboard.js 2.2.0 release: Gauge enhancements, Pie outerRadius & more!

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

What’s New?

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

data: {
labels: {
format: function(v, id ,i, j) {
return v > 0 ?
"Ipsum is simply dummy text" :
"Lorem Ipsum is simply dummy text";
}
}
}
Line breaks for data label texts

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

data: {
labels: {
// call back for label text color
colors: function(color, data) {
// color: the default data label color string
// data: ex) {x: 0, value: 200, id: "data3", index: 0}
....
return d.value > 200 ? "cyan" : color;
}
}
}
Data label text colored as ‘cyan’ for the given condition

Demo: https://naver.github.io/billboard.js/demo/#GaugeChartOptions.GaugeStartingAngle

startingAngle=1 (Left) / startingAngle=-1 (Right)
gauge: {
startingAngle: -1
}
gauge.arcLength=100 (the default) (Left) / gauge.arcLength=75 (Right)

Demo: https://naver.github.io/billboard.js/demo/#GaugeChartOptions.GaugeArcLength

gauge: {
arcLength: 75
}
gauge: {
background: "red"
}

Demo: https://naver.github.io/billboard.js/demo/#PieChartOptions.OuterRadius

pie: {
// specify for all data
outerRadius: 100,
// specify for each data
outerRadius: {
data1: 110,
data2: 80
}
}
point: {
// do not set inline 'opacity' css prop setting
opacity: null,

// set every data point's opacity value
opacity: 0.7
}
point.opacity=null

What’s Next?

For more info, checkout the below issue
https://github.com/naver/billboard.js/issues/1641

--

--

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